本文讲解React-Native Android 开发前环境配置、第一个RN项目建立和运行、Android studio 运行RN项目流程。

参考react-native 中文网（https://reactnative.cn/docs/0.51/getting-started.html），其中遇到几个问题中文网并没有说明，后文会解决。备注：文中代码命令均在管理员权限打开的命令提示符下执行。

一、环境配置

环境配置有点多，分为以下几个:

1.python2 （中文网说目前react-native不支持python3）

Python官网下载地址 https://www.python.org/downloads/

2.NodeJs

官网： http://nodejs.cn/download/
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！（react-native中文网建议开启加速，开启代码如下，本人未开启）

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.Yarn

官网下载：https://yarnpkg.com/zh-Hans/docs/install
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。
安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

4.React-Native 命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

5.Android Studio

React Native目前需要Android Studio2.0或更高版本
Android Studio需要Java Development Kit [JDK] 1.8，你可以在命令行中输入javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到 官网上下载。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。请不要改动安装过程中的选项。
android studio的安装和配置参考React-native中文网
本人下载android studio，安装后提示没有下载android sdk，重新下载的android sdk，并设置环境变量Android Home，如下图：

image.png
系统变量Path中添加图中倒数2、3的android环境变量，如下图：
image.png

6.Android模拟器

（a）用Android studio自带的模拟器
（b）Genymotion
注册登录并下载安装Genymotion（genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择），创建一个新模拟器并启动。
启动React Native应用后，可以按下F1来打开开发者菜单。

二、测试安装react工程

命令提示符（管理员权限打开）下输入：

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

1. 遇到的问题（一）

问题描述：本人在执行 'react-native run-android'时报错如下：

Checking the license for package Android SDK Build-Tools 23.0.1 in XXX
You have not accepted the license agreements of the following SDK components: XXX

报错原因：

Android-23和相应的build tools没有accept licences

解决方法：
打开命令行， 输入如下命令，然后根据输出输入相应的y来accept即可。执行后再重新执行react-native run-android发现问题解决：

 cd /d C:\Users\yourcomputername\AppData\Local\Android\Sdk\tools/bin   //注释：你的android sdk安装目录的bin路径
 sdkmanager.bat --licenses

解决该问题后，命令行执行react-native run-android在真机和模拟器下都正常。成功运行截图如下：

image.png

1. 遇到的问题（二）

问题描述：命令行运行react-native run-android可以正常启动模拟器和真机。Android studio 打开命令行建立的react-native工程后，点击模拟器和真机运行都报错如下：

图1.png
点击模拟器屏幕下方的RELOAD，报错如下：
图2-点击RELOAD报错.png
报错原因：
因为运行后报错图1的错。所以解决图1的错误就ok了。本人当时一直接的是图2 没有连接到server的错，百度了好久也没解决。后来直接把图1的错误解决了，图2的错误自然没有了。所以解决问题要找主要矛盾。

图一报错原因是：原因没有找到assets下文件，需要手动创建并设置。

解决方案 (参考文章)：
(1). 在 android/app/src/main 目录下创建一个 assets空文件夹

mkdir android/app/src/main/assets

(2). 在项目根目录运行

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/

注意: 是编译index.js而不是index.android.js，因为react-native新版本已经没有index.android.js和index.ios.js两个文件了，只有一个index.js文件,所以要编译index.js
会发现 assets文件夹下多出两个文件：

index.android.bundle  和    index.android.bundle.meta

执行完以上两个步骤后，Android studio真机和模拟器运行react-native工程均正常，如下图：

image.png