RN語法雜記-白红宇

1,主軸方向 ---- 在RN中,父組件視圖裏面的控件是如何排列的主要看父組件視圖的主軸方向,默認的主軸方向為向下,所以默認放入的第二個子組件會在第一個子組件的下方,如果需要改變方向,在父組件的"css"中加入下面代碼

flexDirection:'row' //從左往右      flexDirection:'column' //從上往下(默認)      row-reverse 從右往左  column-reverse 從下往上复制代码

2,主軸對齊方式

即組件添加完畢後,所有組件在父組件中整體的相對位置

//flex-start 对齐主轴的起点位置    //flex-end   对齐主轴的终点位置    //space-between 两端对齐    //space-around  平均分配    justifyContent:'flex-start',//默認复制代码

3,側軸對齊方式

//设置侧轴//默认值:stretch  如果没有设置高度,或者高度为auto,子控件就占满父控件    alignItems:'stretch',复制代码

如果單個組件的側軸對齊方式不一樣,則在單個組件的樣式裏面寫

alignSelf:'flex-start'alignSelf:这个属性可以覆盖alignItems,默认为 auto 标示继承父标签的属性'auto', 'flex-start', 'flex-end', 'center', 'stretch'复制代码

4,主軸顯示不下時是否換行

//默认值:nowrap 不换行    flexWrap:'wrap',复制代码

5,得到屏幕寬高

//引入var Dimensions = require('Dimensions');export  default  class  Test4 extends Component{  render(){    return(        
              
     
      当前屏幕宽度:{Dimensions.get('window').width}
               
     
      当前屏幕高度:{Dimensions.get('window').height}
               
     
      当前屏幕的分辨率:{Dimensions.get('window').scale}
             
        );  }}复制代码