RN語法雜記

最新推荐文章于 2024-01-14 17:30:54 发布

weixin_34060741

最新推荐文章于 2024-01-14 17:30:54 发布

阅读量96

点赞数

原文链接：https://juejin.im/post/5a62ace0518825732821834a

版权

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(
        <View style={styles2.container}>
          <Text>当前屏幕宽度:{Dimensions.get('window').width}</Text>
          <Text>当前屏幕高度:{Dimensions.get('window').height}</Text>
          <Text>当前屏幕的分辨率:{Dimensions.get('window').scale}</Text>
        </View>

    );
  }
}
复制代码

转载于:https://juejin.im/post/5a62ace0518825732821834a