ReactNative布局基础

最新推荐文章于 2020-04-02 15:42:17 发布

wh义华

最新推荐文章于 2020-04-02 15:42:17 发布

阅读量488

点赞数

分类专栏： react-native 文章标签： react-native 布局

本文链接：https://blog.csdn.net/honeysx/article/details/78070845

版权

react-native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ReactNative布局基础

1、FlexBox

FlexBox是一个布局的逻辑模型。一个组件可以通过flexbox逻辑来布局子view。
FlexBox通过flexDirection,alignItems,justfyContent组合来实现不同的布局。

2、FlexBox的使用

一个view通过flex指定伸缩的比例，flexDirection指定布局的方向。通过二者共同作用则可以实现各种不同的布局方式。
其中view在父类中所占大小比例为其flex值占比所有子view的flex值之和。

2.1、使用示例

2.1.1、flexDirection属性

flexDirection属性可选值有row，column，row-reverse，column-reverse四种。其中row是从左到右依次排列，column是从上到下依次排列。
而row-reverse和column-reverse顾名思义就是分别按row和column模式的相反方向来排列。
利用如下代码测试各属性值，

<View style={{flex: 1, flexDirection:'row'}}>
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>1</Text>
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2</Text>
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3</Text>
    </View>
</View>

修改其中的flexDirection属性值，得到如下结果。从图中可以看出各个属性值的作用。

flexDirection:row flexDirection:column flexDirection:row-reverse flexDirection:column-reverse

2.1.2、flex属性

flex属性指定了该view在父类中所占大小，是一个相对的概念。若view不指定flex大小，则默认占满父类空间。在开发中如果遇到某个控件没有展示，那么有可能是在布局方向上
某个view没有设置flex，所以占满了父类空间，从而将其他view挤出屏幕。
利用如下代码测试flex的属性值

<View style={{flex: 1, flexDirection:'row'}}>
    <View style={{flex: 1, width: 50, height: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>1</Text>
    </View>
    <View style={{flex: 2, width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2</Text>
    </View>
    <View style={{flex: 3, width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3</Text>
    </View>
</View>

得到如下结果。从图中可以看出flex表示的view所占父类空间大小的占比。（设置了flex后，则在主轴方向上设置view的长度是无效的）

flex_attribute

3、FlexBox的对齐方式

3.1、justfyContent属性

justfyContent属性是设置给父view，用来决定子view在主轴方向上对齐方式的。（即flexDirection方向为row，则justfyContent指定的是row方向的对齐方式，
若flexDirection方式为column，则justfyContent指定的是column方向的对齐方式）。
justfyContent的可选值为：

flex-start
flex-end
center
flex-end
space-between
space-around

其中flex-start,center,flex-end分别为靠左，居中，靠右对齐。space-between则是将剩余空间均匀的分布在子view之间，而space-around则是将剩余空间均匀分布在每个字view的两边。
space-between与space-around的实际效果如下图：

space-between
space-around

3.2、alignItems属性（注意与alignSelf的区别）

alignItem的属性作用与justfyContent类似，其控制子view在非主轴（与主轴垂直方向）方向上的对齐方式。其中，主轴的方向是flexDirction所指定的方向。
alignItem的可选值为：

flex-start
flex-end
center
stretch

其中flex-start,center,flex-end分别为靠顶，居中，靠底对齐。stretch是拉伸模式，即在非主轴方向上将剩余空间占满。（如果在非主轴方向上设置了长度，则拉伸模式是无效的）。
测试stretch模式

<View style={{flex: 1, flexDirection: "row", alignItems: 'stretch', justifyContent: 'center'}}>
    <View style={{flex: 1, width: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>1</Text>
    </View>
    <View style={{flex: 2, width: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2</Text>
    </View>
    <View style={{flex: 3, width: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3</Text>
    </View>
</View>

运行结果如图

alignItems-stretch

4、布局中的单位问题

由于编写样式代码时，组件的宽高是没有单位的。那么在样式代码中指定的宽高单位肯定与实际尺寸有某种对应关系。
通过如下代码

<Text>
    window.width={Dimensions.get("window").width + "\n"}
    window.height={Dimensions.get("window").height + "\n"}
    pxielRatio={PixelRatio.get()}
</Text>