** React-Native环境依赖node环境，如果还未安装node 的朋友 可以先看上一篇文章**
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。（此时node 6.9.2 npm 3.10.9）
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源：
yarn config set registry registry.npm.taobao.org --global
yarn config set disturl npm.taobao.org/dist --global
Android Studio安装
下载地址：developer.android.google.cn/studio/inde… [React Native目前需要Android Studio2.0或更高版本。]
JDK8安装，JAVA_HOME环境变量
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。下载地址：
www.oracle.com/technetwork…
设置并检查java环境变量JAVA_HOME，如C:\Program Files\Java\jdk1.8.0_121 [默认安装位置]
Android SDK和模拟器
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
在初步安装完成后，选择Custom安装项：
HAXM加速驱动
检查已安装的组件，尤其是模拟器和HAXM加速驱动。
开启HAXM（Hardware Accelerated Execution Manager intel CPU硬件加速驱动）
参考资料：
software.intel.com/en-us/andro…
系统要求：
Intel cpu 支持Intel® VT-x 虚拟化
至少4G内存，推荐8G
操作系统：
Microsoft Windows* 10 (64-bit)
Microsoft Windows* 8 and 8.1 (64-bit)
Microsoft Windows* 7 (64-bit)
先在Bios配置开启Intel Virtualization Technology, VT-x；大致过程如下，上网查找自己机器的bios设置
下载Intel HAXM驱动
intelhaxm-android.exe
检查
安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager
点击ok进入下载页面
ANDROID_HOME环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
C:\Users\Administrator\AppData\Local\Android\sdk [默认位置]
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建
设置path
你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。
新建一个AS（Android Studio）工程
创建一个模拟器，AVD(Android Virtual Device)
创建React-Native工程
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
代码分析
AppRegistry
AppRegistry是JS运行所有React-Native应用的入口。应用的根组件应当通过
AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用。
AppRegistry应当在require序列中尽可能早的被require到，以确保JS运行环境在其它模块之前被准备好。
registerComponent(appKey: string, getComponentFunc: ComponentProvider)
StyleSheet
StyleSheet提供了一种类似CSS样式表的抽象。
引入StyleSheet的原因：
从代码质量角度：
** 从render函数中移除具体的样式内容，可以使代码更清晰易懂。** ** 给样式命名也是对render函数中的原始组件的作用的一种标记。**
从性能角度：
创建一个样式表，就可以使得我们后续更容易通过ID来引用样式，而不是每次都创建一个新的对象。
它还使得样式只会在JavaScript和原生之间传递一次，随后的过程都可以只传递一个ID（这个优化还未实现）
View
作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、
还是android.view.View。下面的例子创建了一个View，包含了两个有颜色的方块和一个自定义的组件，并且设置了一个内边距：
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} />
</View>
复制代码View的设计初衷是和StyleSheet搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。
Text
一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。在下面的例子里，嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式，不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠，并且被代码中内嵌的换行符分隔开。
元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着内部的元素不再是一个个矩形，而可能会在行末进行折叠。
样式的继承
React Native实际上还是有一部分样式继承的实现，不过仅限于文本标签的子树。在下面的代码里，第二部分会在加粗的同时又显示为红色：
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
复制代码我们相信这种看起来不太舒服的给文本添加样式的方法反而会帮助我们生产更好的App：
(对开发者来说) React组件在概念上被设计为强隔离性的：你应当可以在应用的任何位置放置一个组件，而且只要属性相同，其外观和表现都将完全相同。文本如果能够继承外面的样式属性，将会打破这种隔离性。
(对实现者来说) React Native的实现也被简化了。我们不需要在每个元素上都添加一个fontFamily字段，并且我们也不需要隐含地在显示文本的时候向上遍历树。唯一的样式继承在原生Text组件中编码，也不会影响到其它组件或者系统本身。
Dimensions
本模块用于获取设备屏幕的宽高。
例子：var {height, width} = Dimensions.get('window');
@param {string} dim 想要获取的尺寸信息的字段名。
@returns {Object?} 返回的尺寸信息值。
Image
一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。
用法样例：
renderImages() {
return (
<View>
<Image
style={styles.icon}
source={require('./icon.png')}
/>
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
</View>
);
}
复制代码