React-Nativ 移動app開發

時間  2019-11-07
標籤 react nativ 移動 app 開發 欄目 React 简体版
原文   原文鏈接

React-Nativ

標籤（空格分隔）： ReactNativejavascript

前景知識

nodejs react reactj
hybrid app (native + web)html

環境搭建：ReactNative中文網： https://reactnative.cn/ 

npm（全稱Node Package Manager，即node包管理器）.
react native 啓動服務端：npm star

查看打包後的腳本 http://localhost:8081/index.a...前端

基礎語法

React

What’s React

React是一個用於組建用戶界面的JavaScript庫，讓你以更簡單的方式來建立交互式用戶界面。java

當數據改變時，React將高效的更新和渲染須要更新的組件。聲明性視圖使你的代碼更可預測，更容易調試。
構建封裝管理本身的狀態的組件，而後將它們組裝成複雜的用戶界面。因爲組件邏輯是用JavaScript編寫的，而不是模板，因此你能夠輕鬆地經過您的應用程序傳遞豐富的數據，並保持DOM狀態。
一次學習隨處可寫，學習React，你不只能夠將它用於Web開發，也能夠用於React Native來開發Android和iOS應用node

此處輸入圖片的描述
心得：上圖是GitHub Popular的首頁截圖，這個頁面是經過不一樣的組件組裝而成的，組件化的開發模式，使得代碼在更大程度上的到複用，並且組件之間對的組裝很靈活。react

Get Started

使用React以前須要在頁面引入以下js庫 。android

  • react.jsgit

  • react-dom.jsgithub

  • browser.min.jsweb

上面一共列舉了三個react.js 、react-dom.js 和 browser.min.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，browser.min.js 的做用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
你能夠從React官網下載這些庫，也能夠將其下載到本地去使用。

使用Reac
解壓從上述地址下載的壓縮包，在根目錄中建立一個包含如下內容的 「helloworld.html」 。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.('example')
          );
        </script>
      </body>
    </html>
在 JavaScript 代碼裏寫着 XML 格式的代碼稱爲 JSX，下文會介紹。爲了把 JSX 轉成標準的 JavaScript，咱們用<script type="text/babel">標籤，而後經過Babel轉換成在瀏覽器中真正執行的內容。

ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
###JSX 
JSX 不是一門新語言，是個語法是一個看起來很像 XML 的 JavaScript 語法擴展。
每個XML標籤都會被JSX轉換工具轉換成純JavaScript代碼，使用JSX，組件的結構和組件之間的關係看上去更加清晰。
JSX並非React必須使用的，但React官方建議咱們使用 JSX , 由於它能定義簡潔且咱們熟知的包含屬性的樹狀結構語法。
JSX必須React上

在JSX中運行javascript代碼，要使用****
var text = "shufu";
ReactDOM.render(
    <h1>text</h1>，
    document.getElemetByI("容器")
);
Usage:
React.render(//使用JSX
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
); 
React.render(//不使用JSX
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

API和組件

建立組件3種方式：

  • ES6

  • ES5

  • 方法的形式

組件生命週期

組件

生命

React

  • 做爲UI

  • 虛擬DOM

  • JSX (是一種在JavaScript中嵌入XML結構的語法.)

    設計的JSX語法倒是讓你在代碼中嵌入結構標記

  • EC6

  • 前端知

React組

工具webstorm

fuwuqi

出現問題 [坑點]

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

一類的錯誤，其實仔細讀錯誤日誌就能夠看得明白是沒有assents目錄，手動建立assents目錄，以後再次執行上面這段命令行。

這裏寫圖片描述

看樣子是正確執行了

Watchman#
Watchman是由Facebook提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager能夠快速捕捉文件的變化從而實現實時刷新）。

npm start

PropertyFinder@0.0.1 start /home/oren/projects/react-native/ReactNative-PropertyFinder
node_modules/react-native/packager/packager.sh

┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/r... │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/home/oren/projects/react-native/ReactNative-PropertyFinder

React packager ready.

[12:00:54] <START> Building Dependency Graph
[12:00:54] <START> Crawling File System
ERROR A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/wa...

{"watchmanResponse":{"version":"3.7.0","error":"A non-recoverable condition has triggered. Watchman needs your help!nThe triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctlnAll requests will continue to fail with this message until you resolventhe underlying problem. You will find more information on fixing this atnhttps://facebook.github.io/wa...n"}}
Error: A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/wa...
t ChildProcess.<anonymous> (/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:202:17)

at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:817:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instancesecho 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_eventsecho 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watcheswatchman shutdown-server

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程