您现在的位置是：首页 > 其它

当前栏目

ReactNative 布局

布局 ReactNative

2023-09-27 14:29:02 时间

react-native 布局

1 flex布局基本概念

flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex Container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。如下图所示：

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局与Android的线性布局（LinearLayout）有点类似，都可以设置布局方向，对齐方式，以及项目的布局占位权重，区别是flex容器中项目分布的总长度超出屏幕宽度，超出的那部分项目不可见，项目不会变形，或者可以设置flexWrap属性，让容器可以分行布局，所有项目都能显示出来。

2 flex基本属性

flex属性声明在：/node_modules/React-native/Libraries/StyleSheet/LayoutPropTypes.js

  // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
  flexDirection: ReactPropTypes.oneOf([
    'row',
    'column'
  ]),

  // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
  flexWrap: ReactPropTypes.oneOf([
    'wrap',
    'nowrap'
  ]),

  // How to align children in the main direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  justifyContent: ReactPropTypes.oneOf([
    'flex-start',
    'flex-end',
    'center',
    'space-between',
    'space-around'
  ]),

  // How to align children in the cross direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  alignItems: ReactPropTypes.oneOf([
    'flex-start',
    'flex-end',
    'center',
    'stretch'
  ]),

  // How to align the element in the cross direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  alignSelf: ReactPropTypes.oneOf([
    'auto',
    'flex-start',
    'flex-end',
    'center',
    'stretch'
  ]),

  // https://developer.mozilla.org/en-US/docs/Web/CSS/flex
  flex: ReactPropTypes.number,

由上述代码，我们可以看到flex的属性并不多，而且很好记忆，以下将会一一介绍

flex属性可以分为容器属性和项目属性
其中容器属性包括：flexDirection，justifyContent，alignItems，flexWrap

项目属性包括：flex，alignSelf

以下介绍会使用到一些代码和图片，先定义两个简单组件，方便理解

//定义一个默认半径为20，颜色为#527fe4的圆组件
var Circle = React.createClass({
  render : function(){
    var size = this.props.size || 20;
    var color = this.props.color || '#527fe4';
    return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/>
  },
});

//定义一个放置标题和项目的容器，传入的value属性将会是需要介绍的flex属性
var Value = React.createClass({
  render : function(){
    var value = 
      <View>
        <Text style={styles.valueText}>{this.props.title}</Text>
        <View style={[styles.valueContainer,this.props.value]}>
          {this.props.children}
        </View>
      </View>;
    return value;
  },
});

//定义一个数组放置5个圆
var children = [<Circle/>,<Circle/>,<Circle/>,<Circle/>,<Circle/>];

2.1 容器属性

flexDirection：布局方向，决定主轴的方向，默认值是column，即纵向布局

|值    |描述                 |
|------|--------------------|
|row   |横向布局，主轴为水平方向|
|column|纵向布局，主轴为竖直方向|

row：横向布局
代码：

<Value title='row' value={{flexDirection:'row'}}>
    {children}
</Value>

视图：

column：纵向布局
代码：

<Value title='column' value={{flexDirection:'column'}}>
    {children}
</Value>

视图：

justifyContent：主轴方向对齐方式，默认值是flex-start，即主轴的开端

|值           | 描述                   |
|-------------|-----------------------|
|flex-start   | 主轴开端                |
|center       | 居中                   |
|flex-end     | 主轴末端                |
|space-between| 项目与项目之间插入相等空隙 |
|space-around | 项目两旁插入相等空隙      |

flex-start：主轴开端
代码：

<Value title='flex-start' value={{flexDirection:'row', justifyContent:'flex-start'}}>
    {children}
</Value>

视图：

center：主轴的中间位置
代码：

<Value title='center' value={{flexDirection:'row',justifyContent:'center'}}>
    {children}
</Value>

视图：

flex-end：主轴的末端位置
代码：

<Value title='flex-end' value={{flexDirection:'row',justifyContent:'flex-end'}}>
    {children}
</Value>

视图：

space-between：项目与项目之间插入相同距离的空隙
代码：

<Value title='space-between' value={{flexDirection:'row',justifyContent:'space-between'}}>
    {children}
</Value>

视图：

space-around：项目两旁插入相同距离的空隙
代码：

<Value title='space-around' value={{flexDirection:'row',justifyContent:'space-around'}}>
    {children}
</Value>

视图：

alignItems：交叉轴方向对齐方式，默认值flex-start，即交叉轴开端
```
|值        | 描述      |
|----------|----------|
|flex-start| 交叉轴开端 |
|center    | 交叉轴居中 |
|flex-end  | 交叉轴末端 |
```
flex-start：交叉轴开端

d058ccbf6c81800a1eb222feb73533fa838b47ee.jpg 971x100 18.1 KB

center：交叉轴的中间位置

42a98226cffc1e17d72427c14c90f603728de9a3.jpg 970x124 18.7 KB

flex-end：交叉轴的末端位置

cdbf6c81800a19d8b4542ff535fa828ba71e46ee.jpg 971x102 18.8 KB

flexWrap：包含内容，默认值是nowrap，不包裹所有内容

|值    |描述                                                     |
|------|--------------------------------------------------------|
|nowrap|项目沿主轴方向布局，超出容器长度的部分不可见                    |
|wrap  |项目沿主轴布局所需长度大于容器总长度时，分行布局，所有项目内容都可见|

nowrap：不包裹内容
代码：

<Value title='nowrap' value={{flexWrap:'nowrap',flexDirection:'row'}}>
      {children}{children}{children}{children}
</Value>

视图：

wrap：包裹内容
代码：

<Value title='wrap' value={{flexWrap:'wrap',flexDirection:'row'}}>
      {children}{children}{children}{children}
</Value>

视图：

2.2 项目属性

flex：布局权重

|值 |描述       |
|---|----------|
|>=0|项目占位权重|

1:0：flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间
代码：

<Value title='1:0' value={{flexDirection:'row'}}>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20,paddingHorizontal:10}}>flex=1</Text>
    <Text style={{color:'white',textAlign:'center',backgroundColor:'yellow',fontSize:20,paddingHorizontal:10}}>flex=0</Text>
</Value>

2:1
代码：

<Value title='2:1' value={{flexDirection:'row'}}>
    <Text style={{color:'white',flex:2,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=2</Text>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>
</Value>

1:1:1:1
代码：

<Value title='1:1:1:1' value={{flexDirection:'row'}}>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20}}>flex=1</Text>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'yellow',fontSize:20}}>flex=1</Text>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=1</Text>
    <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>
</Value>

alignSelf：项目交叉轴方向自身对齐方式

|值        |描述|
|----------|---|
|flex-start|开端|
|center    |居中|
|flex-end  |末端|

代码：

<Value title='alignSelf' value={{flexDirection:'row',height:30,alignItems:'center'}}>
      <View style={{alignSelf:'flex-start'}}>
        <Circle/>
      </View>
      <View style={{alignSelf:'flex-end'}}>
        <Circle/>
      </View>
      <View style={{alignSelf:'flex-start'}}>
        <Circle/>
      </View>
      <View style={{alignSelf:'flex-end'}}>
        <Circle/>
      </View>
      <View style={{alignSelf:'flex-start'}}>
        <Circle/>
      </View>
</Value>

视图：

3 Layout的其他属性

layout除了flex属性之外，当然还有其他属性，同样声明在：/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

  width: ReactPropTypes.number,
  height: ReactPropTypes.number,
  top: ReactPropTypes.number,
  left: ReactPropTypes.number,
  right: ReactPropTypes.number,
  bottom: ReactPropTypes.number,
  margin: ReactPropTypes.number,
  marginVertical: ReactPropTypes.number,
  marginHorizontal: ReactPropTypes.number,
  marginTop: ReactPropTypes.number,
  marginBottom: ReactPropTypes.number,
  marginLeft: ReactPropTypes.number,
  marginRight: ReactPropTypes.number,
  padding: ReactPropTypes.number,
  paddingVertical: ReactPropTypes.number,
  paddingHorizontal: ReactPropTypes.number,
  paddingTop: ReactPropTypes.number,
  paddingBottom: ReactPropTypes.number,
  paddingLeft: ReactPropTypes.number,
  paddingRight: ReactPropTypes.number,
  borderWidth: ReactPropTypes.number,
  borderTopWidth: ReactPropTypes.number,
  borderRightWidth: ReactPropTypes.number,
  borderBottomWidth: ReactPropTypes.number,
  borderLeftWidth: ReactPropTypes.number,

  position: ReactPropTypes.oneOf([
    'absolute',
    'relative'
  ]),

|属性                  |类型  |描述                                |
|---------------------|------|-----------------------------------|
|width                |number|容器或者项目的宽度                    |
|height               |number|容器或者项目的高度                    |
|top,bottom,left,right|number|在父容器的上下左右偏移量               |
|margin               |number|留边，留边的空间不属于容器或者项目自身空间|
|marginHorizontal     |number|水平方向留边                         |
|marginVertical       |number|垂直方向留边                         |
|padding              |number|填充，填充的空间输入容器或者项目自身空间  |
|paddingHorizontal    |number|水平方向填充                         |
|paddingVertical      |number|垂直方向填充                         |
|borderWidth          |number|边界宽度                            |
|position             |enum  |位置方式：absolute与relative         |

position：默认值为relative

|值      |描述   |
|--------|------|
|absolute|绝对布局|
|relative|相对布局|

react的默认位置方式是relative，项目是一个接一个排列下去的，absolute为绝对布局，一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来，absolute属性就能发挥作用了，例如下图：

react的基本组件暂时不支持以图片作为背景，所以这里的的转入是一个文本组件，而红色的圆形是一个图片组件，在iOS里面组件也可以作为容器，图片可以正常显示，但是在Android里面，可能存在些问题，如果使用组件作为容器都会出现图片变得好奇怪，所以就可以absoulte来解决问题了。代码如下：

<View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}>
    <Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_into')}/>
	<Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>转入</Text>
</View>

这里的View跟Android的View有点不一样，View是可以作为容器也可以作为项目，View作为容器还有其他很多属性，例如backgroundColor，borderWidth，borderColor，opacity等等，这里不一一介绍。

4 布局的尺寸说明

React Native的宽高是不需要带单位的，那些width，height，padding，margin的赋值都直接是数字的，当你设定width:10，在IOS的话就是设置了10pt宽度，而在Android上面是10dp，在做项目时，辛勤的美工会帮我们标出所有UI控件的宽，高，边距等等，他们用的单位也是dp，所以赋值style中宽高时，直接填入数字即可。

alignItems 和 alignSelf区别

alignItems

调整伸缩项目在侧轴上的定位方式

可选值： flex-start , flex-end , center , stretch

alignSelf

alignSelf 属性会覆盖容器的 alignItems 属性，取值和用法 alignItems 一样。

可选值： auto , flex-start , flex-end , center , stretch

原文链接：http://139.196.14.76/t/react-native-flex/181/1

参考文章: https://segmentfault.com/a/1190000002658374

猜你喜欢

大数据服务规划
判断用户Input输入的事件来进行登陆
华为帐号助力金融服务体验中信银行成鸿蒙生态先行者
技术分享 | 掌握高频 Docker 命令，夯实内功基础
602Gbps：针对BBC的攻击成为史上最强DDoS攻击
第九十七章 Caché 函数大全 $ZTIMEH 函数
俄罗斯面部识别应用FindFace：匿名时代的终结？
python：当文件中出现特定字符串时执行robot用例
Wireshark抓包：详解TCP三次握手报文内容
delphi 神经网络学习
Git rename from index.lock to index failed
ajax基础秒杀课（已完结）-Array-专题视频课程
《HTML5开发手册》——1.2　这些新元素从何而来
关于Java中常用加密/解密方法的实现
XXXX软件项目系统测试报告
SpringCloud 学习笔记
【bzoj2705】[SDOI2012]Longge的问题欧拉函数
多个常见代码设计缺陷

相关主题

jvm内存布局
css网页布局
css-3列布局
HTML 布局
浏览器的布局
Qt布局管理器
QT---布局管理
Table布局
自适应布局
页面布局
02表格布局
Android布局属性
grid网格布局
css 响应式布局
html等高布局

zl程序教程