好多人说rn好用，一直要推荐我用，我就不信了，来安装玩一下试试效果。实践出真知！安装过程各种坑，工具太多了，太麻烦了，差点放弃（还好坚持下来呢）。
一、安装环境
（一）下载JDK 1.8（必须是1.8版本）
-
JDK下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
-
JDK需要配置两个环境变量：（如果已配置就无需再配置）
PATH：%JAVA_HOME%\bin
CLASSPATH：.;%JAVA_HOME%\lib\tools.jar （一定不要忘了前面的点）
（二）Android Studio、SDK以及模拟器（如果是真机运行不需要安装模拟器）
-
Android Studio
Android Studio的下载地址请看：https://developer.android.google.cn/studio/#downloads
安装方式：指定安装路径，一直点击下一步就可以了。 -
SDK和安卓模拟器：
打开Android Studio，File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可，这里也可以选择安装模拟器，找到对应的勾选进行下载即可。
需要在Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。（如果已经配置，就不用再去配置了。）
例如：
D:\android-sdk\tools;
D:\android-sdk\platform-tools;
（三）安装node
许多前端工具的安装都依赖于node的包管理器npm
-
安装地址：
Node官网： https://nodejs.org/
如果官网打不开，可以看nodejs中文官网 https://nodejs.org/zh-cn/ -
添加环境变量：
下载好之后，复制node的安装路径，在
path中添加node环境变量。示例如下：
E:\develop\nodejs\;
-
查看node版本号：
安装完成后在cmd中输入
npm -v回车，如下图：
查看node版本号
-
查看npm版本号：
在cmd中输入
npm -v回车，如下图：
查看npm版本号
※【说明】npm工具是nodejs里面自带的，所以只要配置了nodejs环境变量就OK了，不需要单独配置npm到环境变量。
（四）Python2.X（不支持Python3.X）
-
下载：
我这里用的版本是2.7.13，下载地址：https://www.python.org/downloads/release/python-2713/
-
安装：
双击，指定路径，下一步就可以完成安装了。
-
配置环境变量：
示例如下：
E:\develop\Python2.7.13\Scripts;
-
查看python安装版本：
输入
python命令即可。
查看python安装版本
（五）yarn
（1）安装方式有以下两种：
-
1、yarn官网下载yarn安装包：
-
官网地址：
yarn官网 https://yarnpkg.com/zh-Hans/
如果官网打不开，可以查看中文网：
yarn中文网 https://yarn.bootcss.com/
我这里选择的版本是1.7.0，你也可以选择其他版本，下载好了之后，双击安装，然后把yarn安装路径配置path环境变量中。 -
添加环境变量， 示例如下：
-
E:\develop\yarn1.7.0\bin\;
-
2、使用npm工具下载yarn：
-
安装命令：
使用命令
npm install -g yarn就可以安装yarn了。 -
安装路径：
-
C:\Users\用户名\AppData\Roaming\npm\yarn
（2）相关命令：
- 1、如果不知道路径，可以使用
where yarn命令查看电脑yarn的安装路径，可以看到我的安装路如下：
C:\Users\\Administrator\AppData\Roaming\npm\yarn
C:\Users\\Administrator\AppData\Roaming\npm\yarn.cmd
E:\develop\yarn1.7.0\bin\yarn
E:\develop\yarn1.7.0\bin\yarn.cmd
E:\develop\yarn1.7.0\bin\yarn.js
- 2、查看yarn版本号：
执行npm view yarn version 查看yarn版本号，当前的版本号为1.7.0
执行 yarn -v 查看安装的yarn版本号，我当前的版本为1.7.0
执行yarn --version 查看安装的yarn版本号，我当前的版本为1.7.0
-
3、升级yarn版本号：
-
通过msi安装的，可以卸载旧版本的yarn，然后官网下载新版的yarn，然后安装。
【注意】通过msi安装的yarn并不会覆盖通过npm安装的yarn，两者同时存在。卸载的话，也是分开卸载的。 -
通过
npm命令安装的，可以有以下几种方式选择：
-
命令行直接安装升级：
npm install yarn -g
加上版本号安装：
npm install yarn@1.7.0 -g
加latest安装:
npm install yarn@latest -g
（六）react native
react native中文网 https://reactnative.cn/
- 使用npm命令行安装react native，如下：
npm install -g react-native-cli
- 查看本地react-native-cli版本号，使用命令：
react-native --version
图示如下，我当前的react-native-cli版本号为2.0.1：
查看本地react native版本号
- 查看react native所有版本信息，使用命令：
npm info react-native
图示如下：
查看react native所有版本信息
- 升级react native版本，使用命令：
npm install --save react-native@0.56.0
其中0.56.0是版本号，可以去官网查一下你要下载的版本号是哪一个，就填写哪一个。
（七）说明
1.安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。
例如：
以前是npm命令：npm install --save react-native@0.56.0
你可以使用yarn命令替代：yarn add react-native@0.56.0
2.加快react native启动的几种方式：
- 1、使用以下命令：
npm config set registry=http://registry.npm.taobao.org/
加快react native启动的命令图示
- 2、使用全局设置的命令：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
使用全局设置的命令
- 3、找到node.js的安装目录，进入
nodejs\node_modules\npm找到文件npmrc，打开后在该文件末尾加上
registry = https://registry.npm.taobao.org然后保存退出即可。
- 4、给yarn设置镜像（如果不用yarn命令，可以不设置这一项）：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
给yarn设置镜像
二、运行首个App
（一）使用命令行创建新项目
使用react-native init 项目名称创建项目，如图所示：
创建项目
（二）手动打开安卓模拟器
可以使用脚本打开，
（二）编译并运行 React Native 应用
在刚创建的rn项目根目录，打开命令行，输入react-native run-android命令，如图所示：
运行成功如下图所示：
三、出现的问题
【建议】
（一）问题1 The development server returned response error code: 500
解决方式：
在刚创建的项目的根目录运行下列代码：
首先执行yarn remove babel-preset-react-native，然后再执行yarn add babel-preset-react-native@2.1.0
（二）问题2 关于命令行提示gradle的一次错
建议：把项目里面的android目录导入到Android Studio，让Android Studio工具帮你自动构建。
（三）问题3 RN默认是用的gradle3.5构建的，所以建议使用AS2.3.X版本（但是不能大于3.0.0版本）导入项目。我用的是AS3.1.3，gradle构建成功的，但是命令行执行
react-native run-android命令一直报各种错，问了别人也找不到解决方案，可能是RN对高版本的AS工具以及高版本的gradle不兼容吧。
（四）如果模拟器上运行项目出现"Unable to load script from assets 'index.android.bundle'.Make sure your bundle is packaged correctly or you are running a package server."这样的错误怎么解决？
解决方式：
1.进入\android\app\src\main目录，新建assets文件夹。
2.进入项目根目录cmd运行以下命令：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
（五）如果第四步的问题还没有解决，建议使用以下方式创建和安装应用：（这个又是一种构建方式，和rn有点区别，可以玩一下，但不建议学这个。）
npm install -g create-react-native-app 这是安装`create-react-native-app`命令工具
create-react-native-app 项目名 例如：create-react-native-app demo1
进入项目根目录，输入`npm start`命令运行（也可以试试yarn start）
（六）Unable to resolve module 'AccessibilityInfo'
react native版本问题，建议下载react-native 0.55.4版本，以及react-native-cli 1.2.0 版本，具体操作如下：
打开cmd命令行，逐个输入以下命令：
npm uninstall -g react-native-cli
npm install react-native@0.55.4
npm install -g react-native-cli@1.2.0
然后打开一个项目目录，打开cmd命令行输入以下命令创建工程：
react-native init --version="0.55.4" 项目名
（七）Invariant Violation:Applicaction 你的项目名称 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.
错误如图所示：
这个问题一般是配置的问题，解决方式如下，确保registerComponent(参数1)和getMainComponentName()返回值这两个保持一致就OK：
根路径里面的index.js文件打开，请看AppRegistry.registerComponent('rn_demo', () => App); 我这里括号内参数1为rn_demo，和项目根路径名称是一致的。
打开目录/android/app/src/main/java/com/项目名/MainActivity.java，找到getMainComponentName()方法，我这里返回的是rn_demo1，事实上我项目根路径名字叫做rn_demo。我只需要改成rn_demo就好了。
@Override
protected String getMainComponentName() {
return "rn_demo1";
}
网友评论