React-native学习过程 二 改变图片和文字的排列

我们首先对React构造函数做出改动

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>
);

在container样式里添加flexDirection: ‘row’，使得布局变成水平排放

在rightContainer样式里添加flex: 1，使得文字部分与图片部分平分区域

以下是完整代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://img5.imgtn.bdimg.com/it/u=4080105893,4096129906&fm=206&gp=0.jpg/'}},
];
import React, { Component } from 'react';
import {
AppRegistry,
Image,
StyleSheet,
Text,
View
} from 'react-native';

export default class MyProject extends Component {

render() {
var movie = MOCKED_MOVIES_DATA[0];
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>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
thumbnail: {
width: 53,
height: 81,
marginLeft:30,
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},

});

AppRegistry.registerComponent('MyProject', () => MyProject);