react-native（rn）环境及问题

React Native简介：

React是Facebook开发的一款JavaScript库，使用这个库可以很好的编写漂亮的网页UI，能简化前端程序员很多操作。
而React Native是在React基础上发展而来，目的让程序员能够真正用JavaScript去开发手机端的APP，像浏览WebAPP 一样，但是同时具有NativeAPP的流程与操作体验。记住，这与你使用WebView完全是不一样的。

参考：

关于为什么学习React Native三点原因

rn官网

rn中文网

阮一峰 ECMAScript 6 入门

给所有开发者的React Native详细入门指南

React Native开发一 webstorm搭建React Native开发环境

安装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 react@15.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

参考:
Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle