配置好环境之后，就可以开始写个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，即可看到我们期盼已久的内容：
可能遇到的问题
- 在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
}
修改完成后，重新执行第三四步
- 在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。
-
在RELOAD的时候，红屏显示：
解决方法:服务没有启动，两步启动之
第一步：在Terminal中输入adb reverse tcp:8081 tcp:8081
第二步：继续输入：npm start
等启动完成，再次点击RELOAD即可。
网友评论