render() {
return (
<TouchableHighlight onPress={this._onPress} style={{ flex: 1, flexDirection: "row" }}>
<View style={styles.container}>
<Text style={styles.rate}>{15.0} </Text>
<Text style = {styles.percent}>% </Text>
<Text style={styles.rateDesc}>預(yù)期年化 </Text>
<Text style = {styles.title} > 年賬戶1年</Text>
<Text style = {styles.expireTime}> 封閉期1 年</Text>
</View>
</TouchableHighlight>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
backgroundColor: "#ffffff",
height:106,
},
rate: {
color: "#f53a31",
fontSize: 28,
marginLeft: 20,
marginTop: 30,
textAlign: "center",
},
percent:{
marginLeft:1,
marginTop:43,
color:"#f53a31",
textAlign:"center",
fontSize:15,
},
rateDesc: {
color: "#999999",
fontSize: 10,
marginTop: 63,
marginLeft: 20,
textAlign: 'center',
},
title: {
color: "#999999",
fontSize: 12,
marginLeft: 55,
marginTop: 35,
textAlign: 'center',
},
expireTime: {
color: "#000",
fontSize: 12,
textAlign: 'center',
marginLeft: 55,
marginTop: 4,
},
icon: {
width: 16,
height: 11,
marginTop: 38,
marginLeft: 11,
},
btn: {
backgroundColor: '#f53a31',
}
});
最后的輸出結(jié)果出乎意料哦哦久脯，所有元素橫向排列晒骇，與我們預(yù)期的ios 相對布局效果不同霉撵。
所以元素都應(yīng)該分組，橫向的相鄰為一組洪囤，豎向排列的為一組徒坡。
justifyContent ,alignItems, flexDirection 都是用來在容器中設(shè)置，約束子元素的布局瘤缩，而不是設(shè)置在子元素中
- <Text style={{ flex: 1, marginLeft: 20, fontSize: 12, alignItems: "center" }}> 大家都在投 </Text>
- <Text style={{ flex: 1, justifyContent: 'flex-end', fontSize: 12, alignItems: "center" }}>123,453人次 </Text>
// 修改后
+ <Text style={{ flex: 1, marginLeft: 20, fontSize: 12,backgroundColor:"red"}}> 大家都在投 </Text>
+ <Text style={{ flex: 1, fontSize: 12,marginRight:10, backgroundColor:"brown",textAlign:"right"}}>123,453人次 </Text>
設(shè)置text的位置排列是 textAlign, 不是alignItems.
另外Text 是特殊的元素喇完，一般布局都是嵌套在View中。
