在Windows下搭建React Native Android开发环境和第一个项目创建运行

总结rn必须的依赖安装

必须准备的安装依赖有：Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

一、 开始安装相关依赖环境

step1:安装JDK,并且配置环境变量(JAVA_HOME)

从Java官网下载JDK并安装。请注意选择x86还是x64版本。
推荐将JDK的bin目录加入系统PATH环境变量。具体步骤可以百度搜索【JDK安装与环境变量配置】
查看是否安装成功：
cmd ==》输入命令：java -version 提示如下图表示成功：

step2: 安装Android studion 及SDK

1、在官网下载Android studio

请注意选择x86还是x64版本。（国内网络不能访问，可以使用翻墙软件，我使用的是：lantern，需要的可以自己去下载）

2、安装完成后：在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

3、.在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（这个必须版本严格匹配23.0.1）、Android Support Library、Android Support Repository

推荐使用腾讯Bugly的镜像加速下载。查看说明

4、环境变量设置

推荐将SDK的platform-tools子目录加入系统PATH环境变量。
最后，把ANDROID_HOME环境变量设置为你sdk所在目录。

step3、安装node.js配置npm

1、从官网下载node.js的官方8.3.x版本或更高版本

注意：node 的版本必须高于 8.3
不知道安装步骤的可以参考：npm安装教程
推荐：由于npm在国内的速度奇慢，建议使用淘宝代理，或者使用其他科学上网工具
使用淘宝代理的方法：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

step4、安装Python

从官网下载并安装python 2.7.x（3.x版本不行）

step5、安装react-native命令行工具（react-native-cli）

安装命令：npm install -g yarn react-native-cli
安装成功之后，打开cmd.exe,输入
react-native -v
,然后enter,如果能成功返回react-native的版本号，则说明安装成功。

step6、安装git for windows

在这里下载安装，安装过程中注意选择"Run Git from Windows Command Prompt"。
到这里环境依赖安装基本完成！！！！！！！！！

二、创建项目,并运行

1、创建项目

打开cmd,切换 到你希望创建项目的目录，比如我创建在E:\reactProject
输入命令：react-native init ReactTest，其中ReactTest是项目的名字,需要花费时间请耐心等待数（或数十）分钟，
如下图：

这里表示项目已经创建成功了，打开E:\reactProject\ReactTest就可以看到刚刚创建的项目目录

2、项目理解

从上面步骤1中得到rn相关的project结构路下图：

其中关键的文件有：
android文件夹，就是一个可以用android studio打开的android项目。
ios文件夹，是一个可以用xcode打开的ios项目。
index.js，这是React Native入口文件。
package.json，类似android studio的build.gradle，你依赖的库都写在里面。
node_module文件夹，你依赖的库下载下来都存放在里面，属于git的忽略文件，你要找的依赖库源码也在里面，包括React和React Native。
这里需要着重理解的是：

1、package.json

package.json，类似于android studio中的build.gradle添加远程依赖，不同的是，package.json大多数时候不需要我们手动添加，我们只需要在根目录通过命令行，npm install xxxxxx --save 就可以依赖一个库了。
install之后，库的依赖信息，自动被写到package.json里面，对应的库也会被下载到node_module文件夹中，类似android studio依赖后把aar同步到本地

2、node_module

node_module是一个忽略文件，提交的时候不需要提交到git上，类似android studio远程依赖下来的aar，也不会提交到git上。其他人在使用React Native项目时，只需要npm install，工程就会根据package.json，去同步下载各个依赖库到node_module。
注意：有时候还需要运行react-native link 或 react-native link xxx，这是因为有些第三方库是通过原生代码加React Native实现的，通过这个命令，可以自动把相关的配置代码，自动添加到android和ios工程中。

3、android 开发需要理解的React Native

1)、React Native 其实是运行在ReactActivity上

一般情况下只在一个activity上运行，一般情况下是因为，你也可以自己写新的Activity，继承ReactActivity来实现你想要的逻辑。

2）Application默认创建工程时，就会继承ReactApplication

其中getPackage()就是返回需要与原生交互的包，MainReactPackage时初始化生成，其他是你react-native link命令时帮你插入的。当然，你也可以自己写与原生交互的模块。

3）路由（页面跳转）

React Native默认是运行在一个Activity上，那么页面之间的跳转自然不是Activity之间的跳转，而是通过** Navigator**来实现跳转的。
是的，Navigator是用来做跳转的，通过场景（Scene）来指定跳转对象。这里Scene类似Intent的作用，告诉Navigator我要去哪里，Navigator负责场景推入和退出。（推荐使用react-native-router-flux框架实现）。

4）state，状态

更新界面，修改显示，加载数据，用户交互，都是靠它，它是整个React Native的核心之一，React Native组件的state变化了，那么它就会重新渲染，所以维护state，通过数据或者动作更新state等，是React Native的重点，也是和原生很大差异的地方。
所以你就看到redux这个东西，也许第一次接触你会觉得它很难理解，但是你只需要知道，它的核心就是让你更好的维护React的state，统一管理和处理state，所以后期redux-thunk会成为你React Native的管理利器。当然，如果组件或项目不复杂，完全不必要接触它。“组件的state改变了，所以界面变化了。”

5）编译调试

编译其实很简单，android其实就是在项目的根目录终端输入react-native run-android就可以编译安装
当前，刚刚接触React Native，运行不起来是常有的事情，百度谷歌一个一个解决就好了，大部分时候都是忘记npm install，react-native link，ip不对，node服务没有重新启动等等

3、运行项目

我使用的是真机调试

1、切换到上面创建项目的跟目录ReactTest

2、输入命令：npm install

这里需要花费时间，请耐心等待

2、命令：react-native start 运行packager

可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒，并且在packager的命令行可以看到形如[====]的进度条。
注意老版本（低于0.49）的地址为http://localhost:8081/index.android.bundle?platform=android
如果你遇到了ERROR Watcher took too long to load的报错，请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，将其中的MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）

3、安卓运行

保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行
react-native run-android
成功效果图如下：

注意：
首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载，请使用稳定有效的科学上网工具。）运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。

至此，应该能看到APP红屏报错，这是正常的，我们还需要让app能够正确访问pc端的packager服务。
摇晃设备或按Menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

致辞：以上是自学react-native创建运行第一个项目的流程总结记录，有需要的可以看看，同时也方便自己以后回头查看，至于react-native js使用的开发工具会在后续新建一篇博客详解记录，有兴趣的欢迎持续关注哦！！！！