react native学习笔记4——FlexBox布局

React 前端之家
前端之家收集整理的这篇文章主要介绍了react native学习笔记4——FlexBox布局，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

FlexBox

React Native是采用FlexBox（弹性）布局，使用FlexBox规则来指定某个组件的子元素的布局，FlexBox提供了在不同尺寸设备上都能保持一致的布局方式，它是CSS3弹性框布局规范，因此熟悉前端的同学可能对此感到很亲切，不过React Native的FlexBox与web上的CSS也存在少许差异。

首先是默认值不同：flexDirection的默认值是column而不是row（这一点与手机客户端开发一致），而flex也只能指定一个数字值。

FlexBox类似android开发中的LinearLayout(线性布局)，不过还是有许多不同之处，千万不能用LinearLayout的知识生搬硬套。

在学习FlexBox属性之前，让我们先了解一个概念：主轴和次轴

  • 主轴即子元素线性排列的方向，如图水平轴为主轴，即子元素按水平方向排列。
  • 次轴即与主轴垂直的轴，在图中为纵轴。

父视图属性(容器属性)

  • flexDirection
  • flexWrap
  • justifyContent
  • alignItems

flexDirection

flexDirection指定布局的主轴方向，定义了父视图中的子元素子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列。如果未指定，默认值是竖直轴(column)方向。（这点与css中不同，但与android的LinearLayout是一致的，默认竖直方向排列）

flexDirection: row | row-reverse | column | column-reverse;
* row: 从左向右依次排列
* row-reverse: 从右向左依次排列
* column(default): 默认的排列方式，从上向下排列
* column-reverse: 从下向上排列

代码示例:

  1. import React,{Component} from 'react';
  2. import {
  3.     Text,View,StyleSheet
  4. } from 'react-native';
  5.  
  6. export default class FlexDirectionDemo extends Component {
  7.     render() {
  8.         return (
  9.             <View style={Styles.container}> <Text style={Styles.subtitle}>flexDirectionDemo:row</Text> <View style={Styles.Box1}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> <Text style={Styles.subtitle}>flexDirectionDemo:row-reverse</Text> <View style={Styles.Box2}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> <Text style={Styles.subtitle}>flexDirectionDemo:column</Text> <View style={Styles.Box3}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> <Text style={Styles.subtitle}>flexDirectionDemo:column-reverse</Text> <View style={Styles.Box4}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> </View> ); } } const Styles = StyleSheet.create({ container: { backgroundColor: "#ffffff",flex: 1,},subtitle:{ backgroundColor: '#ffffff',alignItems: 'center' },Box1:{ height: 60,backgroundColor: '#333333',flexDirection:"row",Box2:{ height: 60,flexDirection:"row-reverse",Box3:{ height: 180,flexDirection:"column",Box4:{ height: 180,flexDirection:"column-reverse",item: { backgroundColor: "#f0f",width:30,margin: 4,height: 30,})

flexWrap

flexWrap定义了子元素在父视图内是否允许多行排列，默认为nowrap(不换行)

flexWrap: nowrap | wrap ;

  • nowrap （默认）：不换行，可能导致溢出。
  • wrap 换行，子元素在一行排列不下时，就进行多行排列。

代码示例:

  1. import React,StyleSheet
  2. } from 'react-native';
  3.  
  4. export default class FlexWrapDemo extends Component {
  5.     render() {
  6.         return (
  7.             <View style={Styles.container}> <Text style={Styles.subtitle}>flexWrap:nowrap</Text> <View style={Styles.Box1}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> <Text style={Styles.subtitle}>flexWrap:wrap</Text> <View style={Styles.Box2}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item}>4</Text> </View> </View> ); } } const Styles = StyleSheet.create({ container: { backgroundColor: "#ffffff",Box1:{ height: 150,flexWrap:"nowrap",Box2:{ height: 150,flexWrap:"wrap",width:100,height: 50,})

justifyContent

justifyContent定义了子元素在主轴上的对齐方式。

justifyContent: flex-start | flex-end | center | space-between | space-
around;

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，子元素之间的间隔都相等。
  • space-around：每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍。
  1. import React,StyleSheet
  2. } from 'react-native';
  3.  
  4. export default class JustifyContentDemo extends Component {
  5.     render() {
  6.         return (
  7.             <View style={Styles.container}> <Text style={Styles.subtitle}>JustifyContent:flex-start</Text> <View style={Styles.Box1}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> </View> <Text style={Styles.subtitle}>JustifyContent:flex-end</Text> <View style={Styles.Box2}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> </View> <Text style={Styles.subtitle}>JustifyContent:center</Text> <View style={Styles.Box3}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> </View> <Text style={Styles.subtitle}>JustifyContent:space-between</Text> <View style={Styles.Box4}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> </View> <Text style={Styles.subtitle}>JustifyContent:space-around</Text> <View style={Styles.Box5}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> </View> </View> ); } } const Styles = StyleSheet.create({ container: { backgroundColor: "#0ff",Box1:{ height: 100,justifyContent:"flex-start",Box2:{ height: 100,justifyContent:"flex-end",Box3:{ height: 100,justifyContent:"center",Box4:{ height: 100,justifyContent:"space-between",Box5:{ height: 100,justifyContent:"space-around",width:50,})

alignItems

alignItems定义子元素在次轴(与主轴垂直的轴)上的对齐方式。

alignItems: flex-start | flex-end | center | stretch;

  • flex-start：次轴的起点对齐。
  • flex-end：次轴的终点对齐。
  • center：次轴的中点对齐。
  • stretch（默认值）：子元素在次轴方向充满整个容器的高度或宽度。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸

  1. import React,StyleSheet
  2. } from 'react-native';
  3.  
  4. export default class AlignItemsDemo extends Component {
  5.     render() {
  6.         return (
  7.             <View style={Styles.container}> <Text style={Styles.subtitle}>alignItems</Text> <View style={Styles.Box}> <Text style={Styles.item}>1</Text> <Text style={Styles.item}>2</Text> <Text style={Styles.item}>3</Text> <Text style={Styles.item_flex_end}>4</Text> <Text style={Styles.item}>5</Text> </View> </View> ); } } const Styles = StyleSheet.create({ container: { backgroundColor: "#0ff",height: 300,Box:{ flex: 1,alignItems:"flex-end",//通过设置flex-start | flex-end | center | stretch;各种值可以看看效果 },flexGrow: 1,height: 100,item_flex_end: { backgroundColor: "#f0f",alignSelf: "flex-end",} })

子视图属性

  • alignSelf
  • flex

alignSelf

alignSelf属性以属性定义了flex容器内被选中子元素的对齐方式。允许该子元素有与其他子元素不一样的对齐方式，可覆盖alignItems 属性。

alignSelf: auto | flex-start | flex-end | center | stretch;
默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。

该属性可能取5个值，除了auto，其他都与alignItems属性完全一致。

以下图为例，该图中父元素的alignItems属性为flex-start，所以子元素按照图alignItems中的flex-start所示，而第三个子元素设置了其alignSelf属性为flex-end,因此第三个子元素的alignSelf属性覆盖父元素的alignItems属性变为与底部对齐。

代码示例:

  1. import React,StyleSheet
  2. } from 'react-native';
  3.  
  4. export default class AlignSelfDemo extends Component {
  5.     render() {
  6.         return (
  7.             <View style={AlignSelfDemoStyle.container}> <Text style={AlignSelfDemoStyle.subtitle}>alignSelf</Text> <View style={AlignSelfDemoStyle.Box}> <Text style={AlignSelfDemoStyle.item}>1</Text> <Text style={AlignSelfDemoStyle.item}>2</Text> <Text style={AlignSelfDemoStyle.item}>3</Text> <Text style={AlignSelfDemoStyle.item_flex_end}>4</Text> <Text style={AlignSelfDemoStyle.item}>5</Text> </View> </View> ); } } const AlignSelfDemoStyle = StyleSheet.create({ container: { backgroundColor: "#0ff",} })

flex

flex 属性定义了一个可伸缩元素的能力（flex的属性值大于0的时候才可伸缩）。

flex: number

如果父元素只有一个子元素设置 flex的值，通常flex:1， 指定该子元素扩展以充满所有剩余空间。
如果有多个子元素都设置了flex值，则根据flex的值的比值，瓜分所有剩余空间。
举个简单的例子：A、B、C三个元素，其flex的值分别为1,2,3。则其三个所占空间大小为1:2:3，如下图：


代码示例:

  1. import React,} from 'react-native';
  2.  
  3. export default class FlexDemo extends Component {
  4.     render() {
  5.         return (
  6.             <View style={ {flexDirection:'row',height:40,backgroundColor:"darkgray"}}> <View style={ {flex:1,backgroundColor:"red"}}> <Text style={ {fontSize:16}}>flex:1</Text> </View> <View style={ {flex:2,backgroundColor:"blue"}}> <Text style={ {fontSize:16}}>flex:2</Text> </View> <View style={ {flex:3,backgroundColor:"green"}}> <Text style={ {fontSize:16}}>flex:3</Text> </View> </View> ); } }

如果将三个子元素的flex都改为1，则三个子元素所占空间大小也是1:1:1

定位position

position 属性设置元素的定位方式，为将要定位的元素定义定位规则。

position : absolute | relative

绝对定位和相对定位。

  • absolute：绝对定位，生成绝对定位的元素，元素的位置通过 “left”,“top”,“right” 以及 “bottom” 属性进行规定。
  • relative：相对定位，生成相对定位的元素，相对于其正常位置进行定位。

如果你之前是做Android开发的，这里会感觉很不适应，这个absolute和relative与Android中的AbsoluteLayout和RelativeLayout大不相同，特别是relative，可以说是完全不同。

网上有很多人总结说“react native 相对定位不是相对于父容器，而是相对于兄弟节点”，我觉得说得很不准确。一个元素如果不设定position去定位的话，默认会形成文档流。每个元素会按顺序出现在文档流中，排到自己的位置上。而如果该元素设置了相对定位position:’relative’，则会相对于自己原本该在文档流的位置进行偏移，并且不影响其相邻的元素的位置摆放。因此总结下来，react native 相对定位不是相对于父容器，也不是相对于兄弟节点，而是相对于自己在文档流中正常位置进行定位。

绝对定位absolute则是相对于父容器进行绝对定位，脱离了文档流。

举个例子，有三个view，普通排列，由于rn是默认flexBox布局,所以会是从上到下一个挨着一个排列：

  1. import React,ScrollView,StyleSheet
  2. } from 'react-native';
  3.  
  4. export default class PositionDemo extends Component {
  5.     render() {
  6.         return (
  7.             <ScrollView> <View style={{flex:1}}> <Text>FlexBox布局</Text> <View style={styles.container}> <View style={styles.Box1}/> <View style={[styles.Box2]}/> <View style={[styles.Box3]}/> </View> <Text>第二个元素position=relative,top:20，left20</Text> <View style={styles.container}> <View style={styles.Box1}/> <View style={[styles.Box2,{position:'relative',top:20,left:20}]}></View> <View style={styles.Box3}/> </View> <Text>第二个元素position=absolute,{position:'absolute',left:20}]}></View> <View style={styles.Box3}/> </View> </View> </ScrollView> ); } } const styles = StyleSheet.create({ container: { height: 180,backgroundColor: '#CCCCCC',marginBottom: 10,Box1: { width: 50,backgroundColor: '#FF0000' },Box2: { width: 50,backgroundColor: '#00FF00' },Box3: { width: 50,backgroundColor: '#0000FF' } });

如上图所示，第二组中，我将第二元素设置为相对定位positon:relative,left:20，可以看到第二个元素偏离原来的位置，但其仍然没有脱离文档流，只是相对于它原本的位置进行偏移。

在第三组中，我将第二个元素设置为绝对定位positon:absolute,left:20，可以看到第二个元素脱离了文档流，相对于父容器进行偏移，剩下第一个元素和第三个元素，还规规矩矩的排在那里。

好奇的朋友可以在第一组中为第二个元素设置一下top:20,left:20，

  1. <View style={[styles.Box2,{top:20,left:20}]}/>

看看会出现什么样的结果呢？

如上图，它与第二组的情况一样，所以我们可以看出元素默认的position是relative。即我们如果不设值position的话，默认按相对定位来处理。

其他属性

  1. margin 外边距
  2. marginBottom 底部外边距
  3. marginLeft 左外边距
  4. marginRight 右外边距
  5. marginTop 上外边距
  6. marginVertical 上下外边距，如果marginTop与marginBottom一样的话，可以直接用这个值代替
  7. marginHorizontal 左右外边距
  8. borderColor 整体边框颜色
  9. borderRadius 整体边框的圆角
  10. borderWidth 整体边框的宽
  11. borderStyle 边框样式 dotted solid double dashed等
  12. borderBottomColor 底边框颜色
  13. borderBottomWidth 底边框宽度
  14. borderLeftColor 左边框颜色
  15. borderLeftWidth 左边框宽度
  16. borderRightColor 右边框颜色
  17. borderRightWidth 右边框宽度
  18. borderTopColor 上边框颜色
  19. borderTopWidth 上边框宽度
  20. borderBottomLeftRadius 左下角圆角边框
  21. borderBottomRightRadius 右下角圆角边框
  22. borderTopLeftRadius 上边框左圆角
  23. borderTopRightRadius 上边框右圆角
  24. padding 内边距
  25. paddingBottom 底部内边距
  26. paddingTop 顶部内边距
  27. paddingLeft 左内边距
  28. paddingRight 右内边距
  29. paddingHorizontal 左右内边距
  30. paddingVertical 上下内边距
  31. height 元素高度，包含padding与border
  32. width 元素宽度，包含padding与border

Demo

本文的示例代码在:
https://github.com/mronion0603/ReactNativeExercise/tree/master/src/02_flex

下一篇将介绍布局实战篇

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作