React Native 教程-基础教程

安装
React Native 需要一些在 开始 React Native 中阐明的基本的安装。

在完成了这些依赖项的安装之后，这里有两条可以为一个 React Native 项目完全准备好的命令。

npm install -g react-native-cli

react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装 react-native 这个命令行，你只需要做一次即可。

react-native init AwesomeProject

这一条命令获取 React Native 的源代码和依赖包，然后在 AwesomeProject/iOS/AwesomeProject.xcodeproj 创建一个新的 Xcode 项目，并且在 AwesomeProject/android/app 下面创建一个 gradle 项目。

开发
在 iOS 端，现在你可以在 Xcode 里面打开这个新项目 (AwesomeProject/AwesomeProject.xcodeproj)，然后使用 ⌘+R 来简单的构建和运行这个项目。这样做也会开启允许代码实时渲染的 Node 服务器。有了它你可以通过在模拟器里面按住 ⌘+R 来看你的更改，而不用在 Xcode 里面重新编译。

在 Android 端，在 AwesomeProject 里面运行 react-native run-android 来在你的模拟器设备上面安装生成的应用，并且开启允许代码实时渲染的 Node 服务器。为了看到你的更改你必须打开震动菜单（摇动你的设备或者按住设备上面的菜单按钮，在模拟器上面按住 F2 或者 Page Up，在 Genymotion 上面按住 ⌘+M），然后点击 Reload JS。

在这篇教程里面我们会开发一个简单版本的电影应用，该应用可以获取电影院里面的 25 部电影，并且将它们显示在 ListView 里面。

Hello World

react-native init 将会生成和你的工程名字一样的应用，在这个例子中就是 AwesomeProject。这是一个简单的 hello world 应用。在 iOS 上面你可以编辑 index.ios.js 来给这个应用做一些改变，然后在模拟器里面按住 ⌘+R 来看发生的改变。在 Android 上面可以编辑 index.android.js来给你的应用做一些改变，并且按住震动菜单上面的 Reload JS 来看发生的改变。

伪造数据

在我们书写代码来获取真正的 Rotten Tomatoes 数据之前，我们可以伪造一些数据开始使用 React Native。在 Facebook 我们经常会在 JS 文件的头部申明常量，就在 requires 下面，但是你想增加什么数据就增加什么数据。在 index.ios.js 或者 index.android.js 里面：

var MOCKED_MOVIES_DATA = [
{title: ‘Title’, year: ‘2015’, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},
];
渲染一部电影

我们将要给这部电影渲染标题，年份，缩略图。因为缩略图在 React Native 里面是一个图片组件，在下面的 React requires 里面增加 Image。

var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
} = React;
现在我们改变这个渲染函数，因此我们可以渲染上面提到的数据，而不是 hello world。

render: function() {
var movie = MOCKED_MOVIES_DATA[0];
return (

{movie.title}
{movie.year}