例如三个视图的flex属性值分别为2、4、8,则它们的高度比例为2:4:8。,宽度不指定,默认为全屏的宽度。
class ZLFReactNativeDemo extends Component { render() { return ( <View style={styles.container}> <View style={styles.style1}></View> <View style={styles.style2}></View> <View style={styles.style3}></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,
flexDirection:column
, backgroundColor: ‘#00FFFF‘, }, style1: { flex: 2, backgroundColor: ‘red‘, }, style2: { flex: 4, backgroundColor: ‘blue‘, }, style3: { flex: 8, backgroundColor: ‘green‘, }, });
如果要改为横向布局,则只需改父视图的属性flexDirection为row
alignSelf
alignSelf主要有flex-start(对于纵向布局来说是居上,对于横向布局是居左)、 flex-end
(对于纵向布局来说是居下,对于横向布局是居右)
、 center(居中)、 auto(自由)、 stretch(铺满)几种对齐方式。
justifyContent和alignItems
alignItems
是水平居中,justifyContent
是垂直居中,这两者跟其他属性不同的是,它们是约束子视图的。
原文:http://www.cnblogs.com/zhanglinfeng/p/5329450.html