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
}

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

  1. 在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。

  1. 在RELOAD的时候,红屏显示:



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

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

你可能感兴趣的:(React-Native系列之:创建运行Hello World工程)