React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。简而言之，如果熟练使用过React做网页开发，那么可以很容易的切换到使用React Native做移动端APP开发。React Native是React大家族的一员，在使用方式，组件生命周期上几乎一样，这对于Web开发工程师来说，无疑是一件天大的好事。PC端使用的是JS语言，而移动端的React Native使用的也是JS语言，这样Web开发工程师真正可以做到移动端，PC端的全栈开发。React Native是Facebook出品的一个革新性的跨平台UI框架，跨平台不是它最大的亮点，它背后的[React]才应该是它的神奇说在。用一两句来总结它的伟大，那就是给把web开发中的无状态开发模式通过React实现了。 那些数不清的状态组合才是桌面应用和手机应用复杂的源头。我本人是一个后端开发，当发现React不仅可以做Web开发，还能开发APP时，于是本着没事瞎折腾的劲，做一个基于React Native的APP练练手。
环境准备
Node：安装node环境配置就不多说了吧Android Studio：安卓的集成开发工具，官网下载安装Android SDK：安卓开发需要的运行环境
Android Studio安装
Android Studio是由谷歌提供的，不过界面风格和IDEA很像，官网下载地址。下载windows版本即可
下载完成后双击运行安装，基本无脑Next就行了，唯一要注意的地方就是安装路径，不要安装在C盘，自己选一个路径安装即可
然后一路Next，等待安装完成即可，安卓SDK一会打开Android Studio可以在里面安装，先通过命令把React Native项目建好。
初始化React Native项目
创建一个android目录，专门用来存放安卓项目，然后打开windows终端，执行下面两个命令，初始化React Native项目
npm install -g react-native-cli
react-native init myAppreact-native-cli是官方提供的快速创建React Native工程的脚手架。我在这创建了一个myApp项目，执行命令后显示如下，等待运行完即可
初始化好后结果如下
进入到myApp文件夹中，可以看到初始化好后，目录结构如下
|- tests
|- android | android 端代码
|- app | app 模块
|- build.gradle | app 模块 Gradle 配置文件
|- progurad-rules.pro | 混淆配置文件
|- src/main | 源代码
|- AndroidManifest.xml | APK 配置信息
|- java | 源代码
|- 包名 | java 源代码
|- MainActivity.java | 界面文件, (加载ReactNative源文件入口)
|- MainApplication.java | 应用级上下文, (ReactNative 插件配置)
|- res | APK 资源文件
|- gradle | Gradle 版本配置信息
|- keystores | APK 打包签名文件(如果正式开发需要自己定义修改签名文件)
|- gradlew | Gradle运行脚本, 与 react-native run-android 有关
|- gradlew.bat | Gradle运行脚本, 与 react-native run-android 有关
|- gradle.properties | Gradle 的配置文件, 正常是 AndroidHome, NDK, JDK, 环境变量的配置
|- build.gradle | Gradle的全局配置文件, 主要是是配置编译 Android 的 Gradle 插件,及配置 Gradle仓库
|- settings.gradle | Gradle模块配置
|- ios | iOS 端代码
|- node_modules | 项目依赖库
|- .buckconfig
|- .flowconfig
|- .watchmanconfig
|- index.js
|- App.js
|- app.json
|- package.json | node配置文件, 主是要配置项目的依赖库,
|- index.android.js | Android 项目启动入口
|- index.ios.js | iOS 项目启动入口
复制代码下面详细解释一下每个文件目录的作用
| 名称 | 解释 |
|---|---|
| tests | 测试文件夹，执行命令 “npm test”会调用此文件夹，在文件夹中需要引入待测试文件 |
| android | Android的原生开发目录，可以用Android Studio打开进行原生开发 |
| ios | Ios的原生开发目录，可以用Xcode打开进行原生开发 |
| node_modules | 存放项目所有依赖的库，在package.json中配置 |
| .buckconfig | buck的配置文件，buck是Facebook推出的一款高效率的App项目构建工具。 |
| .flowconfig | Flow 是 Facebook 旗下一个为 JavaScript 进行静态类型检测的检测工具。 它可以在 JavaScript 的项目中用来捕获常见的 bugs，比如隐式类型转换，空引用等等。 |
| .watchmanconfig | watchman的配置文件，watchman用于监控文件变化，辅助实现工程修改信息 |
| index.js | ios或android的入口，但是老版本中可能使用index.ios.js/index.android.js。 android中配置application文件的getJSMainModuleName()配置入口 |
| app.json | app的json文件 |
导入项目
打开刚刚安装好的Android Studio
然后导入刚刚初始化好的安卓项目，注意要选择build.gradle文件，即myApp目录下的android目录，而不是直接打开myApp目录。
gradle会自动下载相关依赖，等待项目初始好就行了
在此期间，可以配置一下安卓的SDK和安卓虚拟机
Android SDK安装
打开 File -> Settings... -> System Settings -> Android SDK，点击Edit
然后选择安装目录，一路Next即可
在环境变量Path中添加这两个目录
Android虚拟机配置
为了便于调试或者没有真机的情况下，可以配置一个安卓虚拟机用于开发调试，首先选择一个合适的机型
我这里选择了现在主流的6.3寸的屏幕，然后选择x86系统，安卓10.0系统，然后点击Download下载安装虚拟机
等待下载好后，选择刚刚下载好的虚拟机点击Next会进入如下界面，虚拟机实例内存选择4G，然后继续点击Next
注意：安装虚拟机需要CPU开启虚拟化支持，如果没有开启需要进入BIOS设置开启虚拟化，没有开启虚拟化或者虚拟化设置不对会报如下异常
运行React Native
安卓SDK和虚拟机都配置好后，回到项目，此时Gradle应该已经把项目初始化好了，如果没有初始化好就继续再等等吧。需要注意的是项目初始化可能会报如下异常，导致初始化失败
这实际是因为项目配置的 build-tools platforms platform-tools 和本地下载的版本存在不一致的情况，需要进入到安卓SDK的安装目录下
# 1.进入到安装目录
cd F:\WorkTool\android-sdk10.0\tools\bin
# 2.1. windows执行命令
sdkmanager --licenses
# 2.2. linux执行命令
./sdkmanager --license更新 license 文件，执行过程需要多次确认。全部选择y即可。更新完成后再次初始化Gradle项目。好，到这里算把环境问题全搞定了，直接运行项目吧。
运行App
通过前面的配置我已经把SDK和安卓虚拟机全配置好了，现在只管运行就行了
如果顺利的话，会弹出安卓虚拟机，同时可以看到React的标志，欢迎来到React！
通过上面的提示可以看到主页是编辑App.js，于是我在App.js中加了一句话试试效果
不过令我奇怪的是重启服务后，这句话并没有加上去，而是需要点击myApp的wrapper后，再重启服务才加上了这句话
重启后效果如下，嗯，万里长征总算走完了第一步。。。
