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,backgroundColor: 'green',flex: 1}}>Text2</Text> <Text style={{width: 50,backgroundColor: 'yellow',flex: 2}}>Text3</Text> {/*flex属相相当于Android中的权重就是所在父控件的比例比如Text4占父控件的七分之三 alignSelf熟悉是相对于父控件的位置auto,center,flex-end,flex-start,stretch和alignItems属相意思相同*/} <Text style={{width: 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',},});