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,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',},});

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...