前言
目前关于React Native的教程很多，官方文档写的也不错，但是感觉大部分教程写的不是很清楚，导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于React Native 0.43，只适用于用Windows平台的Android开发者。
1.配置React Native
首先我们要先来安装一些软件，如下所示。
Chocolatey
Chocolatey是一个Windows上的命令行包管理器，安装了Chocolatey就可以通过命令行来安装一些我们需要软件。我们打开cmd命令行程序使用如下命令即可。在Mac上则需要安装Homebrew，和Chocolatey的作用是一样的。
powershell -NoProfile@H_301_19@ -ExecutionPolicy@H_301_19@ Bypass -Command@H_301_19@ "iex ((new-object net.webclient).DownloadString ('https://chocolatey.org/install.ps1'))"@H_301_19@ &&@H_301_19@ SET@H_301_19@ PATH=%@H_301_19@PATH%@H_301_19@;%@H_301_19@ALLUSERSPROFILE%\@H_301_19@chocolatey\@H_301_19@bin
Python 2
安装完Chocolatey就可以在cmd命令行程序使用如下Chocolatey来安装Python 2。
choco install@H_301_19@ python2
当然我们也可以直接Python官网去下载安装，下载地址为https://www.python.org/downloads/。这里我的Python版本为2.7.10。
Node.js
打开cmd命令提示符窗口，使用Chocolatey来安装NodeJS。
choco install@H_301_19@ nodejs.install@H_301_19@
同样的也可以去Node.js官网去下载安装，地址为https://nodejs.org/en/。这里我的Node.js版本为7.8.0。这时我们关掉cmd命令提示符窗口，打开Node.js command prompt（Node.js命令提示符窗口），输入如下语句来设置npm镜像以加速后面的过程：
npm config set@H_301_19@ registry https://registry.npm@H_301_19@.taobao@H_301_19@.org@H_301_19@ --global
npm config set@H_301_19@ disturl https://npm.taobao@H_301_19@.org@H_301_19@/dist --global
Yarn、React Native的命令行工具（react-native-cli）
接下来安装Yarn和react-native-cli，Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。react-native-cli则用于执行React Native的创建、初始化、更新项目、运行打包服务（packager）等任务。在Node.js command prompt输入如下语句来安装它们。
npm install -g@H_301_19@ yarn react-native@H_301_19@-cli@H_301_19@
安装完yarn后也要设置镜像源：
yarn config set@H_301_19@ registry https://registry.npm@H_301_19@.taobao@H_301_19@.org@H_301_19@ --global
yarn config set@H_301_19@ disturl https://npm.taobao@H_301_19@.org@H_301_19@/dist --global
2.配置Android Studio
这里假设你是一个Android开发者并且已经安装了Android Studio，我们要确保SDK安装正确，打开Android Studio的SDK Manager，在SDK Platforms窗口中勾选Show Package Details，并确保已经安装了下图打勾的选项。
接下来在SDK Tools窗口中勾选Show Package Details，在Android SDK Build Tools列表中勾选23.0.1，勾选最底部的Android Support Repository。
3.使用React Native创建并运行项目
这时关闭所有的命令提示符窗口，打开Node.js command prompt，进入存储React Native项目路径下，比如我的是d:/rn，输入如下语句来创建React Native项目：
react-native@H_301_19@ init firstProject
这时会在d:/rn中生成名为firstProject的项目文件，我们用Android Studio加载firstProject文件中android文件。接下来运行SDK的模拟器，这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中：
cd firstProject
react-native@H_301_19@ run-android@H_301_19@
这时模拟器运行效果如下图所示。
这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机或者按下menu键(CTRL+M)来进入React Native的开发者选项。
关于模拟器这里建议使用Genymotion，它所占用的内存要远小于SDK自带的模拟器。
4.Hello World
我们将index.android.js 文件的代码清空并加入如下代码。
import React,{ Component } from 'react'@H_301_19@;//1@H_301_19@
import { AppRegistry,Text } from 'react-native'@H_301_19@;
class@H_301_19@ HelloWorldApp extends Component {//2@H_301_19@
render() {
return@H_301_19@ (
<Text@H_301_19@>@H_301_19@Hello world</Text@H_301_19@>@H_301_19@//3 ); } } AppRegistry.registerComponent('firstProject',() => HelloWorldApp);//4@H_301_19@
这段代码是ES6编写的，ES6是JavaScript语言的下一代标准。不了解的同学可以买一本阮一峰的《ES 6标准入门》，电子书地址为http://es6.ruanyifeng.com/。
在注释1处做了两件事，一是为react组件指定默认的输出，并命名为React，二是从react组件中导入Component 变量。
注释2处定义了HelloWorldApp 组件并继承自Component ，接着在render方法中return了注释3处的内容，这是一种在JavaScript中嵌入XML结构的语法，叫做JSX，JSX编写的内容会显示在界面中。注释4处用AppRegistry模块来告知React Native哪一个组件被注册为整个应用的根容器。
接着我们连续两次按下键盘的R键来刷新界面，这样”Hello world”就显示在界面中。
参考资料
搭建开发环境
React Native开发错误警告处理总结
React Native学习笔记2：Android环境搭建 《ES 6标准入门（第二版）》
