React Native 教程——手把手搭建开发环境

前言

开始学习RN后一路踩坑，很多次想过放弃，但是依然坚持了下来。遇到红屏，先试着去翻译读懂报什么错，耐心点解决积攒经验。今天就把自己的踩坑经验总结一下，为了大家避免重复踩坑，跟着我的一步一步慢慢来，很简单，主要是心态要好，哈哈！

学习参考

React Native中文网

搭建开发环境

（这里使用Android + macOS 进行搭建。）

安装Node.Js

第一步，首先是想办法下载Node到电脑上，需要 5.0或更高版本。下载后安装就行。

1、官网下载：https://nodejs.org/en/

2、命令符下载：

brew install node

最后，检测安装结果：（
如果出现版本数字标识，说明安装成功。）

node -v

下载测试项目
使用终端命令符输入即可下载一个官网的Demo：

react-native init AwesomeProject

这里有个坑：按下enter回车键出现停顿缓慢？如果没有可跳过。

问题表现：光标就一直在那转圈。很明显，被墙了，国内开发者常见的问题。

解决方法：

 1、用翻墙软件如蓝灯打开后重新下载即可。

 2、把 NodeJs源码下载到本地，然后提取给 node-gyp，命令输入：bash node-gyp.sh 。

项目下载完成后，可以在Finder文件夹里找到，项目文件夹名称就是AwesomeProject。接下来，准备手机设备进行运行。

查看设备连接

确保你的设备已经成功连接。可以输入adb
devices来查看:

$ adb devices
List of devices attached
emulator-5554 offline   # Google模拟器
14ed2fcc device         # 真实设备

在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。
译注：如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保adb devices的输出只有一个是连接状态。
如果没有设置过ADB，请先花1分钟时间跟着博文设置一下：mac环境下设置adb及command not fount解决方法
然后，安装运行项目到设备，输入命令：

cd AwesomeProject

react-native run-android

如果设备没安装上AwesomeProject，可直接用Android studio或eclipse开发工具打开AwesomeProject文件里的Android项目，点击run运行安装即可。

红屏报错解决：

java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.

解：这是因为还没有在手机上设置 server 和 port，摇一摇启动设置页面，点击 DevSettings -> Debug server host & port for device -> 输入 本机ip:8081，如：192.168.6.191:8081，本机 ip 可用 ifconfig 命令查看。配置完后返回，再摇一摇然后点击 Reload 重新加载。

Application AwesomeProject has not been registered.

解：首先，通过命令：ps aux | grep react-native 查看正在运行的进程，然后输入：launchPackager.command，再使用命令：kill加进程id 来结束该进程。另外需要注意的是AwesomeProject文件夹里有一个index.android.js的文件，里面一行代码就是Registry的关键地方。

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

注意，终端命令：react-native run-android ，会开启一个进程必须保持开着，不然红屏报服务没打开！！！！！！！

至此，设备上应该出现index.android.js文件里的text的文本信息了。如中途有其他情况，请在博客里留言，或加入我的群。