React Native开发之FlexBox代码+图解

前端之家收集整理的这篇文章主要介绍了React Native开发之FlexBox代码+图解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

来自Leo的原创博客,转载请著名出处

我的stackoverflow


前言

FlexBox布局是React Native的布局核心,鉴于自己对FlexBox还有很多概念不太清楚,这篇文章就当成是总结,并且分享出来给大家。

FlexBox布局能够帮助你更好的帮助你控制控件的大小和位置,FlexBox非常适合Mobile端的适配,我想这也是FaceBook为什么选择FlexBox作为React Native布局的原因吧。

本文参考文章如下

当然,React Native官网也有FlexBox相关的文档,不过讲解的内容不多。

!!!!React Native的迭代更新很快,所以如果有读者发现了本文代码不适配新版本了,欢迎评论,我会及时修改


Getting Start

react-native@H_301_36@ init  LearnFlexBox

运行

cd LearnFlexBox/@H_301_36@
react-native@H_301_36@ run-ios@H_301_36@

会看到默认的截图

由于模拟器截图实在太宽,所以本文把Demo范围限定在一个小的范围内
重写Render方法

render() {
    return (
      <View@H_301_36@ style@H_301_36@={styles.container}@H_301_36@>@H_301_36@
        <View@H_301_36@ style@H_301_36@={styles.exampleContainer}@H_301_36@>@H_301_36@

        </View@H_301_36@>@H_301_36@
      </View@H_301_36@>@H_301_36@
    );
  }

这里的exampleContainer风格如下

exampleContainer@H_301_36@:{ width@H_301_36@:320@H_301_36@,height:200@H_301_36@,backgroundColor:'gray'@H_301_36@ @H_301_36@@H_301_36@@H_301_36@}

Container和Item

  • Container就是容器,有些属性是设置到Container上的例如alignItems。设置到Container上的属性决定了如何布局内部的Item
  • Item, 在容器中的子视图。设置到Item上的属性,决定了自己在Container中的位置大笑

有过iOS或者安卓原生开发的同学应该能有个更清楚的认识,很像View和Subview的关系


flexDirection

这个Container属性决定了按照哪个方向来布局Item,默认从上到下
添加一个style

exampleItem@H_301_36@:{ width@H_301_36@:30@H_301_36@,height:30@H_301_36@,backgroundColor:'#27E6E2'@H_301_36@ @H_301_36@@H_301_36@@H_301_36@}

然后,在添加三个子视图

<View@H_301_36@ style@H_301_36@={styles.exampleContainer}@H_301_36@>@H_301_36@
  <View@H_301_36@ style@H_301_36@={styles.exampleItem}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@
  <View@H_301_36@ style@H_301_36@={styles.exampleItem}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@
  <View@H_301_36@ style@H_301_36@={styles.exampleItem}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@
</View@H_301_36@>@H_301_36@

然后,修改exampleContainer,添加一个属性flexDirection

exampleContainer@H_301_36@:{ width@H_301_36@:320@H_301_36@,backgroundColor:'gray'@H_301_36@,flexDirection:'column'@H_301_36@ @H_301_36@@H_301_36@@H_301_36@},

当flexDirection设置为column的时候效果

当flexDirection设置为row的时候

注意:React Native的FlexBox目前不支持row-reverse和column-reverse


alignItems-垂直轴上的位置关系

有四个值

'flex-start@H_301_36@','@H_301_36@flex-end@H_301_36@','@H_301_36@center','@H_301_36@stretch'@H_301_36@@H_301_36@

示例代码如下

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,height@H_301_36@:200,backgroundColor@H_301_36@:'gray@H_301_36@',alignItems@H_301_36@:'stretch@H_301_36@',flexDirection@H_301_36@:'row@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,backgroundColor@H_301_36@:'green@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,backgroundColor@H_301_36@:'blue@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,height@H_301_36@:50,backgroundColor@H_301_36@:'red@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,height@H_301_36@:60,backgroundColor@H_301_36@:'orange@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@


还有一种stretch表示拉伸,拉伸的时候不需要完整的设置高度宽度,比如

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,backgroundColor@H_301_36@:'orange@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果


alignSelf

五个值,当Item有这个属性的时候,会优先读取item的alignSelf来布局,也就是说会覆盖Container的alignItems。例如

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,alignItems@H_301_36@:'center@H_301_36@',height@H_301_36@:30,backgroundColor@H_301_36@:'green@H_301_36@',alignSelf@H_301_36@:'flex-end@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,height@H_301_36@:40,backgroundColor@H_301_36@:'blue@H_301_36@',alignSelf@H_301_36@:'flex-start@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,alignSelf@H_301_36@:'stretch@H_301_36@',alignSelf@H_301_36@:'auto@H_301_36@',backgroundColor@H_301_36@:'orange@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果


justifyContent-水平轴上的位置关系

五个值

'flex-start@H_301_36@','@H_301_36@space@H_301_36@-between','@H_301_36@space@H_301_36@-around'@H_301_36@@H_301_36@

同样,我们还是举个例子,来看看实际效果
代码如下

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,justifyContent@H_301_36@:'space-around@H_301_36@',backgroundColor@H_301_36@:'orange@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

flex-占据剩余空间的权重

例如,如下,不设置宽度,高度一样,三个item,flex都是1,那么每个item的宽度占据1/3

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,flexDirection@H_301_36@:'row@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=![这里写图片描述](http:@H_301_36@//img.blog.csdn.net@H_301_36@/20160524215306065@H_301_36@)@H_301_36@@H_301_36@{{flex@H_301_36@:1,backgroundColor@H_301_36@:'green@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{flex@H_301_36@:1,backgroundColor@H_301_36@:'blue@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{flex@H_301_36@:1,backgroundColor@H_301_36@:'red@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果

当我们固定中间宽度为50,然后两边flex都是1的时候


flexWrap-决定在flex的方向上填满后是否换行

两个值,默认不换行

'wrap'@H_301_36@,'nowrap'@H_301_36@

代码

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,flexDirection@H_301_36@:'column@H_301_36@',flexWrap@H_301_36@:'wrap@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,backgroundColor@H_301_36@:'orange@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,height@H_301_36@:70,backgroundColor@H_301_36@:'pink@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

换行效果

不换行效果


top/bottom/left/right

这个比较直观,距离上下左右的距离
例如,距离top:10,left:10

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,flexDirection@H_301_36@:'row@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{top@H_301_36@:10,left@H_301_36@:10,width@H_301_36@:30,backgroundColor@H_301_36@:'green@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果


padding相关

与Padding相关的一共有以下几个

  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • paddingVertical
  • paddingHorizontal

例如,一个100*100View在没有padding的时候

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,alignItems@H_301_36@:'flex-start@H_301_36@',paddingLeft@H_301_36@:20,paddingTop@H_301_36@:10}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:100,height@H_301_36@:100,backgroundColor@H_301_36@:'pink@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果

设置padding

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,backgroundColor@H_301_36@:'pink@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果


Border相关

几个相关的属性

  • borderWidth
  • borderTopWidth
  • borderRightWidth
  • borderLeftWidth
  • borderBottomWidth

举个例子

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,justifyContent@H_301_36@:'center@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:50,backgroundColor@H_301_36@:'pink@H_301_36@',borderBottomWidth@H_301_36@:3,borderColor@H_301_36@:'white@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

margin相关

于margin相关的一共有以下几个属性

  • margin
  • marginBottom
  • marginHorizontal
  • marginLeft
  • marginRight
  • marginTop
  • marginVertical

在不设置margin的情况下

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,justifyContent@H_301_36@:'center@H_301_36@',flexDirection@H_301_36@:'row@H_301_36@'}}@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:30,backgroundColor@H_301_36@:'pink@H_301_36@' }}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:30,backgroundColor@H_301_36@:'blue@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:30,backgroundColor@H_301_36@:'green@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果

设置margin的时候

<View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:320,marginLeft@H_301_36@:10,marginRight@H_301_36@:20}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ <View@H_301_36@ style@H_301_36@=@H_301_36@@H_301_36@{{width@H_301_36@:30,backgroundColor@H_301_36@:'green@H_301_36@'}}@H_301_36@>@H_301_36@</View@H_301_36@>@H_301_36@ </View@H_301_36@>@H_301_36@@H_301_36@

效果


后续

由于没有Web的开发经验,所以React Native的博客更新较慢,这个系列应该会一直更新下去。如果发现问题,欢迎评论,我会及时修正。

猜你在找的React相关文章