React-Native系列之：创建运行Hello World工

配置好环境之后，就可以开始写个Hello World工程练练手咯。
IDE：WebStorm + Android Studio

第一步：WebStorm新建工程

在WebStorm中：File->New->Project->选择React Native，然后在Location中选择项目存储路径并在末尾添加上项目名字，如下图：

点击Create，然后耐心等待数分钟，程序会自动去npm仓库下载相关依赖包。下载完成后，一个最基本的RN工程就出来了，如下图：

第二步：Android Studio引入工程

接下来，打开Android Studio，准备引入项目：Open an existing Android Studio project->选择刚刚创建的项目的android模块，如下图：

注意，是项目当中的android模块。
引入成功后，就可以开始正式运行RN项目了。

第三步：运行项目

连接手机或打开模拟器。
在Android Studio中点击运行按钮,将该项目安装到手机/模拟器上。安装成功后，并不会显示我们想要的内容，而是会一片红：

原因也很简单，我们只将App安装到手机上，相当于原生代码已经运行了，但是RN代码还没有运行加载进来。接下来，就打包安装RN部分。

第四步：安装RN

切换到WebStorm，打开Terminal，先输入:

adb reverse tcp:8081 tcp:8081

再输入：

npm start

相关命令行和日志输出如下：

如图，显示“Loading dependency graph,done”，就表明服务已经完全启动起来了。然后，点击红色屏幕下的RELOAD，即可开始安装RN的Bundle文件。等到BUNDLE文件安装完成，屏幕显示的也不是我们预期的内容，而是一片白，如下：

这是正常现象，至于为什么，我也不知道。解决办法也很简单，杀掉该进程，重新点击打开App，即可看到我们期盼已久的内容：

可能遇到的问题

1. 在RELOAD的时候报错：

Unable to resolve module `AccessibilityInfo` from `E:\Coding\ReactNative\Demo\HelloRN\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module does not exist in the 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 $TMPDIR/react-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

屏幕上显示：

解决方法：react-native版本为0.56.0时会发生此问题，解决办法是将react-native版本降为0.55.4：
修改package.json中react-native版本：

"react-native": "0.55.4"

同时，修改android/app/build.gradle中的react-native的版本：

dependencies {
    compile "com.facebook.react:react-native:0.55.4"  // From node_modules
}

修改完成后，重新执行第三四步

2. 在RELOAD的时候，报错：

error: bundling failed: Error: Plugin 0 specified in "E:\\Coding\\ReactNative\\Demo\\HelloRN\\node_modules\\babel-preset-react-native\\index.js" provided an invalid property of "default" (While processing
preset: "E:\\Coding\\ReactNative\\Demo\\HelloRN\\node_modules\\babel-preset-react-native\\index.js")

同时，屏幕红屏显示：

解决方法：你仔细看看package.json/dependencies中引入的babel-preset-react-native，是不是如下：

"dependencies": {
    "babel-preset-react-native": "5",
  },

“5”肯定不是babel-preset-react-native的正确版本，所以需要安装正确版本的babel-preset-react-native。删掉该行引用。在Terminal中输入：

npm install babel-preset-react-native

即可正确安装babel-preset-react-native。
安装完成后，即可重新RELOAD。

3. 在RELOAD的时候，红屏显示：

   
   
   

   解决方法:服务没有启动，两步启动之

第一步：在Terminal中输入adb reverse tcp:8081 tcp:8081
第二步：继续输入：npm start
等启动完成，再次点击RELOAD即可。