ReactNative学习之Flexbox布局

Flexbox布局在RN开发中至关重要，它用来指定某个组件的子元素布局方式，可以使用一套布局适应多种屏幕，一般情况，使用三种布局方式就可以满足大部分情况：

1、flexDirection：决定组件的布局方向，包括column（默认）、row。

2、alignItems：决定子元素在次轴的布局方向（与主轴垂直的轴），可选项包括flex-start、center、flex-end、stretch（次轴方向必须无固定尺寸才生效）。

3、justifyContent：子元素在主轴上的排列方式，包括flex-start、center、flex-end、space-around、space-between。

在使用Flexbox布局的时候，我们还可以根据屏幕的宽度来布局，充满整个屏幕

const windowWidth = Dimensions.get('window').width;

export default class FlexView extends Component{
    render(){
      return(
      <View style={{
        //flex:1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        //backgroundColor: 'green',
      }}>
      <View style={{flex:1, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'red'}} />
      <View style={{flex:2, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'blue'}} />
      <View style={{flex:1, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'gray'}} />
    </View>
      );
    }
}

这里，在子布局里，使用flex，数值不同，会根据数值的比例去设定大小，opacity是用来设计透明度的，可以查看view的相关属性和style。

下一篇，我来简单的说下滚动视图。