React Native-FlexBox布局

class FlexBoxDemo extends Component {
  render() {
    return(
        <View style={flexBoxStyle.flexBoxStyle}>
          <Text style={{width: 50, height: 50, backgroundColor: 'red', flex: 1}}>Text1</Text>
          <Text style={{width: 50, height: 50, backgroundColor: 'green', flex: 1}}>Text2</Text>
          <Text style={{width: 50, height: 50, backgroundColor: 'yellow', flex: 2}}>Text3</Text>
          {/*flex属相相当于Android中的权重就是所在父控件的比例比如Text4占父控件的七分之三
           alignSelf熟悉是相对于父控件的位置auto,center,flex-end, flex-start,stretch和alignItems属相意思相同*/}
          <Text style={{width: 50, height: 50, backgroundColor: 'blue', flex: 3, alignSelf: 'flex-end'}}>Text4</Text>
        </View>
    );
  }
}

const flexBoxStyle = StyleSheet.create({
  flexBoxStyle: {
    marginTop: 20,
    flex: 1,
    //row, column,横向和竖向
    flexDirection: 'row',
    //space-between(两端固定), flex-start(固定在开始), flex-end(固定在结束),
    // center(固定在中间), space-around(两端大约是其它平分空间的二分之一)
    justifyContent: 'space-around',
    //flex-start(子控件在父控件的开始),flex-end(子控件在父控件的结束位置), center(子控件在中间), stretch(拉伸),
    alignItems: 'stretch',
  },
});