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模拟器以及此项目对应的内容,效果如下:

demo-1

如果想要修改显示内容,请打开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 (
 <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,可以看到效果如下:

demo-2

这还没完,我们可以以一种更优美的方式来展示电影的信息,就是下面这个结构:

+---------------------------------+
|+-------++----------------------+|
|| || 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,可以看到效果如下:

demo-3

下次我们聊聊如何取回真实数据,当然,下次不一定是什么时候(LOL)。