序言
本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧。如果你希望知道React Native是什么以及为什么Facebook打造了它，可以读读
我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有，建议你可以先从开始学习。
准备工作
React Native需要一些基础的配置工作，你可以参考来进行。
在所有依赖的软件都已经安装完毕后，只需要输入两条命令就可以创建一个React Native工程。
-
npm install -g react-native-clireact-native-cli是一个终端命令，它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做
react-native的命令。这个安装过程你只需要进行一次。 -
react-native init AwesomeProject这个命令会初始化一个工程、下载React Native的所有源代码和依赖包，最后在
AwesomePrjoect/iOS/AwesomeProject.xcodeproj和AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。
本站论坛区提供了。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，解压即可直接运行。开发
想开发iOS版本，你现在可以在XCode中打开刚刚创建的工程(AwesomePrjoect/iOS/AwesomeProject.xcodeproj)，然后只要按下⌘+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的Node服务（React Packager）。所以每当你修改代码，你只需要在模拟器中按下⌘+R，而无需重新在XCode中编译。
想开发Android版本，先连接你的设备或启动模拟器，然后在AwesomeProject目录下运行react-native run-android，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的Menu键，或者在模拟器上按下F2或Page Up，Genymotion按下⌘+M)，然后在菜单中点击“Reload JS”。
在本向导中我们会创建一个简单的Movies应用，它可以获取25个上映中的电影，然后把他们在一个ListView中显示。
Hello World
react-native init命令会创建一个指定名字的应用，我们刚才输入的命令就创建了一个名为AwesomePrjoect的应用。这是一个简单的Hello World应用。对于iOS版本，你可以编辑index.ios.js来做一些改动，然后在模拟器中按⌘+R来看到修改的结果。对Android版本，你可以编辑index.android.js来做一些改动，然后在摇一摇菜单中点击“Reload JS”来看到修改的结果。
模拟数据
译注：本文的示例代码改用了ES6语法，可能和其他文档写法不一致。但React Native从0.18之后，新建项目默认已经采用了ES6语法，故我们推荐不熟悉ES6与ES5区别的朋友先读读，另外还可以看看。
在我们真正从Rotten Tomatoes(译注：一个国外的电影社区)抓取数据之前，我们先制造一些模拟数据来练一练手。在Facebook我们通常在JS文件的开头，紧跟着import语句之后声明一个常量，不过这不重要，你可以把它放在index.ios.js和index.android.js的任意位置：
var MOCKED_MOVIES_DATA = [ {title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},]; 展现一个电影
我们接下来要展现一个电影，绘制它的标题、年份、以及缩略图(译注：这个过程我们通常会叫做“渲染/render”，后面我们都会用“渲染”这个词)。渲染缩略图需要用到Image组件，所以把Image添加到对React的import列表中。
import React, { AppRegistry, Component, Image, StyleSheet, Text, View,} from 'react-native'; 然后修改一下render函数，这样我们可以把上面创建的模拟数据渲染出来。
render() { var movie = MOCKED_MOVIES_DATA[0]; return ( {movie.title} {movie.year} ![]()
); } 按下⌘+R或者Reload JS，现在你应该能看到文字"Title"和"2015"，但现在Image组件没渲染任何东西，这是因为我们还没有为图片指定我们想要渲染的宽和高。这通过样式来实现。当我们修改样式的时候，我们也应该清理掉我们不再使用的样式。
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, },}); 然后把它应用到Image组件上：