如何运行react native github代码里的样例代码

本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。

围观本文需自备Mac OSX ， XCode ， node 以及 npm 。

做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：

npm install -g react-native-cli

和

react-native init AwesomeProject

此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容，效果如下：

如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。

接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。

一、模拟数据

在var React = require('react-native');后面，我们先模拟一下海报所需要的数据：

var MOCKED_MOVIES_DATA = [
 {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

二、渲染

我们需要展示电影的标题、年份以及缩略图，因此我们需要下面这些东西（看起来也不难理解）：

var {
 AppRegistry,
 Image,
 StyleSheet,
 Text,
 View,
} = React;

下面，为了展示我们需要的内容，我们来修改一下render部分的内容。

render: function() {
   var movie = MOCKED_MOVIES_DATA[0];
   return (
       
       {movie.title}
       {movie.year}
       
     
   )
}

最直观的感受，就像是我们在Javascript代码中写了HTML代码，看起来类似于