React Native簡介：

React是Facebook開發的一款JavaScript庫，使用這個庫可以很好的編寫漂亮的網頁UI，能簡化前端程式設計師很多操作。
而React Native是在React基礎上發展而來，目的讓程式設計師能夠真正用JavaScript去開發手機端的APP，像瀏覽WebAPP 一樣，但是同時具有NativeAPP的流程與操作體驗。記住，這與你使用WebView完全是不一樣的。

參考：

rn官網

rn中文網

安裝jdk

安裝node.js

安裝yarn

npm install -g yarn

安裝react-native命令列工具react-native-cli

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

npm install -g react-native-cli

Yarn、React Native 的命令列工具（react-native-cli）

//使用npm安裝yarn
npm install -g yarn react-native-cli

//設定映象源：
yarn config set registry https://registry.npm.taobao.org --global
 

yarn config set disturl https://npm.taobao.org/dist --global

安裝android sdk

安裝git

下載webstorm，建立rn專案

命令列：

//建立專案：
react-native init AwesomeProject

//啟動
react-native start

//重開命令列、執行
react-native run-android

檢視安裝的react-native和react版本

react-native --version
        react-native-cli: 2.0.1
 

        react-native: 0.56.0

知道最新版本後，通過以下命令來安裝：

npm install --save react-native@0.55.4

react-native upgrade

同樣，

npm info react(目前是15.3.2)

知道最新版本後，通過以下命令來安裝：

npm install --save [email protected].3.2

瀏覽器：

預設埠是8081,這時候可以用瀏覽器訪問

http://localhost:8081/index.android.bundle?platform=android

如果可以訪問表示伺服器端已經可以了。

坑：ERROR Metro Bundler can’t listen on port 8081

已經起了一個RN專案的服務後，再在另一個專案起服務的時候就會報錯 ERROR Metro Bundler can’t listen on port 8081；

解決：工作管理員去掉佔用的埠

坑：The development server returned response error code: 500

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `AccessibilityInfo` from    
`H:\zhuomian\react\node_modules\react-native\Libraries\react-native\react-native-implementation.js`:  
Module `AccessibilityInfo` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.   
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (H:\zhuomian\react\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:167:1306)
    at ResolutionRequest.resolveDependency (H:\zhuomian\react\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:80:16)
    at DependencyGraph.resolveDependency (H:\zhuomian\react\node_modules\metro\src\node-haste\DependencyGraph.js:237:485)
    at Object.resolve (H:\zhuomian\react\node_modules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (H:\zhuomian\react\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (H:\zhuomian\react\node_modules\metro\src\DeltaBundler\traverseDependencies.js:294:16)
    at H:\zhuomian\react\node_modules\metro\src\DeltaBundler\traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (H:\zhuomian\react\node_modules\metro\src\DeltaBundler\traverseDependencies.js:239:307)
 BUNDLE  [android, dev] ./index.js 鈻�鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻� 6.3% (1/4), failed.

解決辦法：

在專案跟目錄執行下列程式碼：

yarn remove babel-preset-react-native

yarn add babel-preset-react-native@2.1.0

　　如果沒有安裝yarn可以用npm

如果解決不了 採用以下：

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `AccessibilityInfo` from
 `C:\Users\Administrator\Desktop\rntest\AwesomeProject\node_modules\react-native
\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityIn
fo` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (C:\Users\Administrator\Desktop\rntest\A
wesomeProject\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution
.js:167:1306)
    at ResolutionRequest.resolveDependency (C:\Users\Administrator\Desktop\rntes
t\AwesomeProject\node_modules\metro\src\node-haste\DependencyGraph\ResolutionReq
uest.js:80:16)
    at DependencyGraph.resolveDependency (C:\Users\Administrator\Desktop\rntest\
AwesomeProject\node_modules\metro\src\node-haste\DependencyGraph.js:237:485)
    at Object.resolve (C:\Users\Administrator\Desktop\rntest\AwesomeProject\node
_modules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (C:\Users\Administrator\Desktop\rntest\AwesomePro
ject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\Administrator\Desktop\rntest\AwesomeProject
\node_modules\metro\src\DeltaBundler\traverseDependencies.js:294:16)
    at C:\Users\Administrator\Desktop\rntest\AwesomeProject\node_modules\metro\s
rc\DeltaBundler\traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (C:\Users\Administrator\Desktop\rntest\AwesomeProject\node_modules\m
etro\src\DeltaBundler\traverseDependencies.js:239:307)
 BUNDLE  [android, dev] ..\..\../index.js ▓░░░░░░░░░░░░░░░ 6.3% (1/4), failed.

解決：

react-native init AwesomeProject
cd AwesomeProject
//進入專案後報錯
react-native run-android
//執行報500錯誤

//解決執行以下即可：
npm uninstall react-native
npm install --save react-native@0.55.4
react-native run-android
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0
react-native run-android