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