ReactNative布局基础

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>1Text>
    View>
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2Text>
    View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3Text>
    View>
View>

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

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>1Text>
    View>
    <View style={{flex: 2, width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2Text>
    View>
    <View style={{flex: 3, width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3Text>
    View>
View>

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

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的实际效果如下图:


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>1Text>
    View>
    <View style={{flex: 2, width: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>
        <Text>2Text>
    View>
    <View style={{flex: 3, width: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >
        <Text>3Text>
    View>
View>

运行结果如图

4、布局中的单位问题

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


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

显示屏幕的宽高及屏幕密度,结果如下:

而实际的屏幕宽高为:

由此分析可知样式文件中的宽高单位均是dp,即实际的宽高为样式设置的值乘以屏幕密度。

5、总结

  1. 通过flex及flexDirection来设置布局大小比例及方向,justfyContent与alignItems设置子view的对齐方式,从而构建各种布局。
  2. 在样式文件中宽高单位均为dp。

6、参考

  1. http://www.infoq.com/cn/articles/react-native-layout
  2. https://facebook.github.io/react-native/docs/flexbox.html
  3. https://segmentfault.com/a/1190000002658374
  4. https://facebook.github.io/react-native/docs/pixelratio.html
  5. https://github.com/facebook/react-native/issues/4934

你可能感兴趣的:(react-native,react-native,布局)