React Native环境搭建及项目生成运行

React Native环境搭建及项目生成运行
React官方网址：
https://reactnative.cn/
必须安装的依赖有：Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。
注意 ：Node 的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
1.安装Node
Node安装后会自带npm，Dos下设置国内镜像地址
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安装Yarn（Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。）
npm install -g yarn react-native-cli
设置Yarn国内镜像地址
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
2.安装Android Studio(最新版本Android Studio有自带SDK，自己下载SDK也可以。)
记得勾选Android Virtual Device(目前编译 React Native 应用需要的是Android 8.0 (Oreo)版本的 SDK)


记得安装Android Studio和Phyton后要配置环境变量并把%ANDROID _HOME%\platform-tools;%ANDROID _HOME%\tools以及C:\Python27添加到Path环境变量中。(默认Android Studio在C:\Users\Administrator\AppData\Local\Android\Sdk，这里只举个例子)：

Dos下进入需要安装的项目文件夹中使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：
react-native init AwesomeProject
等待创建完成后React Native也就差不多完成了，接下来要看如何运行了
3. 你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：
如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…"，然后选择所需的设备类型并点击"Next"。

创建完Android虚拟设备后先运行Android虚拟设备(运行虚拟设备与之前的React Native创建不冲突)
Dos下进入项目文件夹并执行以下命令
cd AwesomeProject
react-native run-android
注意：由于国内的获取环境封锁，build时候需要的很多包都无法获取到，所以前提是你需要一个比较稳定的能访问外网的网络环境，具体搭建过程可以参考以下链接http://blog.sina.com.cn/s/blog_77209cdd0102xfar.html
在Android Studio中File->Setting中设置代理Proxy为你本地VPS以便build时候获取更新包。
用Android Studio打开React Native项目AwesomeProject\android文件夹下的Android文件，然后等待项目自动build下载相应文件(下载时间有点长，需要耐心等待)。

下载过程中有时候会出现包下载不到，浏览器中查看提示的包错误链接时候返回404错误确实是包的数据源问题，这时候就不得不更换包的版本或者buildToolsVersion了,最简单的方式就是你先用Android Studio创建一个本地Android应用然后查看相应的Gradle以及Build版本后然后照搬照套。


执行命令react-native run-android有的会提示jcenter的错误,这时候可以在gradle中设置生成时候获取包的url

maven{url ‘http://maven.aliyun.com/nexus/content/groups/public/’}
在repositories的jcenter()上添加如上maven方法并设置Enable embedded Maven repository


最后再try again一次应该就可以build成功了，然后我们就可以继续执行命令react-native run-android了，但是执行后模拟器上出现如下红屏情况，最主要的原因是因为React Native新版本文件名已经从index.android.js变为了index.js(在AwesomeProject项目文件夹中我们能看到index.js文件)


1.新建assets：进入\android\app\src\main新建assets文件夹
2.生成index.android.bundle文件：Dos下进入AwesomeProject项目文件夹下执行如下语句：
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
然后你就可以在项目文件夹AwesomeProject\android\app\src\main\assets下看到index.android.bundle文件了
3.重新运行react-native run-android

注意：以后每次修改AwesomeProject文件夹下面的文件后都要重新执行以上index.android.bundle生成语句后才能在Android中看到结果
最后一步要发布自己的.apk文件只要在Android Studio打开的项目中点击菜单栏的Build->Build Bundle(s)/APK(s)->Build APK(S)之后程序就会自动生成.apk文件，在项目文件夹AwesomeProject\android\app\build\outputs\apk\debug中就能看到相应的.apk生成文件