React Native 基础练习指北（一）

原文连接：http://www.tinghaige.com/

本着什么都要搀和的原则，一块儿来看看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。

1、模拟数据

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

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

2、渲染

咱们须要展现电影的标题、年份以及缩略图，所以咱们须要下面这些东西（看起来也不难理解）：

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

下面，为了展现咱们须要的内容，咱们来修改一下render部分的内容。

render: function() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
        <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source={{uri: movie.posters.thumbnail}} />
      </View> 
    )
}

最直观的感觉，就像是咱们在Javascript代码中写了HTML代码，<View>看起来相似于<div>。（此时在iOS模拟器中cmd+R能够看到不带样式的效果）

接下来，咱们为渲染出来的数据添加样式：

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

咱们可使用flex来进行布局，看起来是个好消息。

在这时候，教程说，海报图片（<Image>）尚未添加样式，咱们找到<Image source={{uri: movie.posters.thumbnail}} />，添加上style={styles.thumbnail}也就是变成下面的样子：

<Image
    source={{uri: movie.posters.thumbnail}}
    style={styles.thumbnail}
/>

此时在模拟器中cmd+R，能够看到效果以下：

这还没完，咱们能够以一种更优美的方式来展现电影的信息，就是下面这个结构：

+---------------------------------+
|+-------++----------------------+|
||       ||        Title         ||
|| Image ||                      ||
||       ||        Year          ||
|+-------++----------------------+|
+---------------------------------+

咱们只须要修改一下render部分return的内容以及样式styles的部份内容：

return (
    <View style={styles.container}>
      <Image
        source={{uri: movie.posters.thumbnail}}
        style={styles.thumbnail}
      />
      <View style={styles.rightContainer}>
        <Text style={styles.title}>{movie.title}</Text>
        <Text style={styles.year}>{movie.year}</Text>
      </View>
    </View>
);

修改styles中container部分：

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
},

在styles中添加rightContainer：

rightContainer: {
    flex: 1,
},

样式内容写在styles对象中，不要忘记写,。

下面优化一下年份和标题的样式：

title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
},
year: {
    textAlign: 'center',
},

此时在模拟器中cmd+R，能够看到效果以下：

下次咱们聊聊如何取回真实数据，固然，下次不必定是何时（LOL）。