React Native 之基礎flexbox佈局命令

//引入這個為了得到屏幕的寬高和分辨率
var Dimensions = require('Dimensions');

const mystyles = StyleSheet.create({
export  default  class  Demo extends Component{
  render(){
    return(
          <Text>当前屏幕宽度:{Dimensions.get('window').width}</Text>
          <Text>高度:{Dimensions.get('window').height}</Text>
          <Text>分辨率@2x@3x:{Dimensions.get('window').scale}</Text>

        <View style={mystyles.container}>
          //红色控件占用父组件主轴方向的比例:1/3
          <Text style={{backgroundColor:'red',flex:1,height:60,
          alignSelf:'flex-start'
          }}>NO.1</Text>
          // alignSelf:这个属性可以覆盖alignItems
          <Text style={{backgroundColor:'green',flex:2,height:70}}>NO.2</Text>
    );
  }
}

const mystyles = StyleSheet.create({

  container: {
      flex:1,//使整個View佔滿(即默認垂直方向只有這一個View,所以是佔滿),如果用在text標籤上,假設主軸上有3個text,每個flex分別為1,2,3,則每個text占主軸比分別為1/6,2/6,3/6
      marginTop:25//上邊距
      width:300,//設置寬度
      height:100,//设置高度
      backgroundColor: 'red',//设置背影颜色
      flexWrap:'wrap',//主轴显示不下,换一行,默认值:nowrap

      //改变主轴的方向 --> 默认是垂直方向
      //column         从上到下
      //column-reverse 从下到上
      //row            从左往右
      //row-reverse    从右往左
      flexDirection:'row'

      //设置主轴的对齐方式
      //flex-start 对齐主轴的起点位置
      //flex-end   对齐主轴的终点位置
      //space-between 两端对齐
      //space-around  平均分配,兩邊有空隙
      justifyContent:'space-around',
      //设置侧轴
      //默认值:stretch  如果没有设置高度,或者高度为auto,子控件就占满父控件
      alignItems:'stretch',


  },
});