FlexBox

flex布局


export default class App extends Component<> {
  render() {
    return (
        <View sytle={styles.container}>
          <View style={styles.child1}>

          </View>
          <View style={styles.childe2}>

          </View>
        </View>

    );
  }
}

    /*
    参考 css 盒式布局
    */

   var styles = StyleSheet.create({
     container:{
       margin:30,
       width:300,
       height:500,
       backgroundColor:"yellow",
       //主轴方向,默认为column,
       //设置为横向排列
       flexDirection:"row",
       //主轴方向
       justifyContent:"center",
       //交叉轴
       alignItems:"center"

     },
     child1:{
       width:100,
       height:100,
       backgroundColor:"green"
     },
     childe2:{
       width:100,
       height:100,
       backgroundColor:"blue"
     }

   });


/* flex (对齐方式)
* 可以给组件指定flex, flex的值是数字
* flex:1  表示组件可以撑满父组件所有的剩余空间
* 若同时存在多个并列的子组件,flex:1 则均分
* 若子组件的flex的值不等, 增flex的值越大,则谁占的空间比例就大(占用剩余空间比=flex值比)
*
* 练习
*
*
* */

  var styles = StyleSheet.create({
    container:{
      margin:30,
      flex:1,//撑满整个窗口
      backgroundColor:"yellow"
    },
    child1:{
      flex:1,
      backgroundColor:"green",
    },
    chile2:{
      flex:1,
      backgroundColor:"red"
    }


  });