React Native环境搭建

前言：一直听别人说到react，但都没有去关心过，最近因为公司领导的要求，接触了一下react native，知道了它是facebook推出的一个全新的框架，主要用来做混合开发的，可以跨平台，第一感觉就是，我擦，这不是给日益严峻的安卓市场盖了一层霜吗？但技术总是在向前不断发展的，该学的还是要学的，今天费了好大的劲，参考了许多网上的资料，终于将环境搭建好了，在此分享一下完整成功步骤，希望可以给予别人一点帮助。

环境配置

1、安装JDK(网上教程很多，在此不做赘述了)

2、安装SDK(网上教程很多，在此不做赘述了)

3、设置SDK：打开SDKManager，确保以下目录已安装(注意：React Native使用的是android版本是23.0.1，只支持这一个sdk版本)

4、工具安装

1、Node.js的下载安装：node.js轻量级的Web器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本

• 下载地址：http://nodejs.cn/
• 下载好后直接双击安装即可，一路next即可。

• 检测是否安装成功

  打开cmd，输入node -v回车，查看结果，如图：

2、安装git

• 下载地址：https://git-for-windows.github.io/
• 安装：安装注意选择支持windows Command 和 windows ’ default console window，如下图中的选项，其余的直接默认即可

安装完后，就可以使用npm命令了，打开cmd输入npm：如下图

3、安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了，建议将react-native-cli克隆到其他盘，不要在c盘直接clone

• 在cmd命令行中进入希望安装的目录
• 输入git clone https://github.com/facebook/react-native.git，等待下载

• clone成功后

• 进入刚刚下载下来的react-native目录下的react-native-cli目录配置国内镜像:因为要下载的东西服务器在国外，所以需要设置镜像

• 进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g

  

  安装完成后，到这里就完成了所有的基础配置了，也就是说前期工作已做完了，下面就可以创建项目进行开发了。

5、创建RN项目

• 进入你希望创建项目的目录后，输入react-native init FirstAPP，等待项目创建完成，时间也许会有点长，耐心等待即可

6、开启项目

• 工程项目已建立完毕，然后进入这个工程目录中，并执行输入react-native start，开启这个工程或者将项目导入Studio，在Studio中运行。

• 检查FirstApp项目是否启动成功

  在浏览器中访问http://localhost:8081/index.android.bundle?platform=android，如下图所示，则启动成功：

• 运行FirstApp项目:进入项目目录，输入react-native run-android 回车即可启动。

遇到的坑

上面分享的是如何搭建环境并创建一个最简单的安卓项目，但是这并代表不需要其他操作了，项目运行起来后你会发现好多大坑在等着你去填，在此也总结一下，遇到相同问题的童鞋，可以参考一下。

1、SDK not found错误，如图：

解决方案：在项目的android目录下创建local.properties文件，添加如下内容：        sdk.dir=D:/android/AndroidStudio/sdk（注意此处换为你的sdk目录）    注意：斜线的方向为“/”,不是“\”

2、运行项目，界面上报错，如图

解决方案：在终端中，进入到项目的根目录，执行下面这段命令行：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 如果第一次运行报错，手动创建assets目录，创建好后重新运行上面的命令，查看项目目录，assets目录下多出两个文件，如图：

3、运行项目界面上报错，如图：

错误原因：ip地址不对解决方案：1、如果是真机，左右晃动手机，唤起设置属性窗口，点击“Dev settings”

如果是模拟器，按住Ctrl + M 键，即可唤起属性窗口2、点击Debuug server host 出现设置ip地址窗口3、输入ip地址，端口固定为8081，如图

4、启动应用后，唤起属性窗口后，点击Reload重新加载，发现app报错。如图所示：

错误原因：调用react-native start命令启动PackageServer时，没有在项目根目录下启动解决方法：切换目录到项目根目录下，调用react-native start命令启动PackageServer即可。