React Native 系列(四) -- 布局

前言

本系列是基于React Native版本号0.44.3写的。RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局。

CSS属性布局

视图边框

  • 何时使用? 想要设置自己周边有边框的时候
  • 注意点:一定要设置边框宽度
borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度 
borderTopWidth number 顶部边框宽度 
borderWidth number 边框宽度 
border<Bottom|Left|Right|Top>Color 各方向边框的颜色,<>表示连着一起,例如borderBottomColor
borderColor 边框颜色

尺寸

width number
height number

外边距

margin number 外边距
marginBottom number 下外边距 
marginHorizontal number 左右外边距 
marginLeft number 左外边距 
marginRight number 右外边距 
marginTop number 上外边距 
marginVertical number 上下外边距

注意marginRightwidth冲突,如果设置了widthmarginRight无效。

内边距

padding number 内边距
paddingBottom number 下内边距 
paddingHorizontal number 左右内边距 
paddingLeft number 做内边距 
paddingRight number 右内边距 
paddingTop number 上内边距 
paddingVertical number 上下内边距

这里想跟大家介绍一下网页中的盒子模型布局,看图说明一切:

相对定位和绝对定位

  • 边缘 left number 左边缘 right number 右边缘 top number 上边缘 bottom number 下边缘
  • 定位 通过leftrighttopbottom边缘属性进行定位。 absolute:绝对定位,参照父控件位置定位 relative:相对定位,参照当前控件原始位置定位

Flex 布局

使用RN开发,一般都采用Flex布局,使用这套布局就非常快。

Flex 简介

Flex布局又叫弹性布局,会把组件看成一个容器,它的所有子组件都是它容器中的成员,通过Flex,就能迅速布局子成员。

Flex 主轴和侧轴

  • Flex中有两个重要的概念就是:主轴和侧轴
  • 主轴和侧轴之间的关系是相互垂直的
  • 主轴:决定子组件默认的布局方向:水平、竖直
  • 侧轴:决定子组件与主轴垂直的方向
    • 比如主轴水平,那么子组件默认水平布局排布,侧轴就是控制子组件在竖直方向上的布局

flexDirection属性

  • flexDirection:决定子组件主轴的方向,水平或者竖直
  • flexDirection共有4个值,在RN中默认是column。 row:主轴水平方向,从左往右。依次排列 row-reverse:主轴水平方向,从右往左。依次排列 column:主轴竖直方向,从上往下。依次排列 column-reverse:主轴竖直方向,从下往上。依次排列

代码演练:

export default class RNDemoOne extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={styles.baseTextStyle}>1</Text>
          <Text style={styles.baseTextStyle}>2</Text>
          <Text style={styles.baseTextStyle}>3</Text>
          <Text style={styles.baseTextStyle}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      flexDirection: 'row'
  },

    baseTextStyle: {
      height: 50,
      width: 50,
        fontSize: 15,
        backgroundColor: '#FF3333',
        margin: 20,
        textAlign: 'center',
    }
});

效果图:

  • row
  • row-reverse
  • column
  • column-reverse

flexWrap属性

  • flexWrap决定子控件在父视图类是否允许多行排列。
  • flexWrap共有两个值,默认为nowrap
nowrap 组件排列在一行,可能导致溢出
wrap 组件在一行显示不下时,会换行

将上述代码中<Text></Text>组件的宽度改为 75 。 效果:

  • nowrap
  • wrap

justifyContent

  • justifyContent设置主轴子组件具体布局,是靠左,还是居中等。
  • justifyContent共有5个值,默认为flex-start
flex-start: 子组件向主轴起点对齐,如果主轴水平,从左开始,如果主轴竖直,从上开始。

flex-end: 子组件向主轴终点对齐,如果主轴水平,从右开始,如果主轴竖直,从下开始。

center: 居中显示,注意:并不是让某一个子组件居中,而是整体效果居中。

space-between: 均匀分配,相邻元素间距相同。起点和终点靠边

space-around: 均匀分配,相邻元素间距相同。起点和终点间距是组件间间距的一半。

代码演练:

export default class RNDemoOne extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={styles.baseTextStyle}>1</Text>
          <Text style={styles.baseTextStyle}>2</Text>
          <Text style={styles.baseTextStyle}>3</Text>
          <Text style={styles.baseTextStyle}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'flex-start'
  },

    baseTextStyle: {
      height: 50,
      width: 50,
        fontSize: 15,
        backgroundColor: '#FF3333',
        marginTop: 20,
        textAlign: 'center',
    }
});

效果:

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

alignItems

  • alignItems决定子组件侧轴方向上的布局
  • alignItems共有4个值,默认为stretch
flex-start: 侧轴方向上起点对齐
flex-end: 侧轴方向上终点对齐
center: 子组件侧轴居中
stretch: 子组件在侧轴方向被拉伸到与容器相同的高度或宽度

注意点:如果指定了宽或者高,这stretch对应的地方不能拉伸,比如指定了高度,这stretch在高度上就是那个指定的值。(由于贴了太多图,这里就不贴图了,各位可以自己编写代码运行看看效果。?)

alignSelf

  • alignSelf:自己定义自己的侧轴布局,用于一个组件设置
    • 当某个子组件不想参照默认的alignItems的时候,可以设置alignSelf,自己定义自己的侧轴布局
  • alignSelf共有5个值,默认为auto
auto:继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
flex-start:子组件向侧轴起点对齐
flex-end:子组件向侧轴终点对齐
center:子组件在侧轴居中
stretch:子组件在侧轴方向被拉伸到与容器相同的高度或宽度

代码演练:

export default class RNDemoOne extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={[styles.baseTextStyle, {alignSelf: 'flex-start'}]}>1</Text>
          <Text style={styles.baseTextStyle}>2</Text>
          <Text style={styles.baseTextStyle}>3</Text>
          <Text style={styles.baseTextStyle}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      alignItems: 'center'
  },

    baseTextStyle: {
      height: 50,
      width: 50,
        fontSize: 15,
        backgroundColor: '#FF3333',
        marginTop: 20,
        textAlign: 'center',
    }
});

flex

  • flex:决定子控件在主轴中占据几等分
  • flex:任意数字,所有子控件flex相加,自己flex占总共的多少,就有多少宽度

代码演练:

export default class RNDemoOne extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={[styles.baseTextStyle, styles.text1Style]}>1</Text>
          <Text style={[styles.baseTextStyle, styles.text2Style]}>2</Text>
          <Text style={[styles.baseTextStyle, styles.text3Style]}>3</Text>
          <Text style={[styles.baseTextStyle, styles.text4Style]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      alignItems: 'center'
  },

    baseTextStyle: {
      // height: 50,
      // width: 50,
        fontSize: 15,
        backgroundColor: '#FF3333',
        marginTop: 20,
        textAlign: 'center',
    },

    text1Style: {
        flex: 1,
        backgroundColor: 'red'
    },

    text2Style: {
        flex: 1,
        backgroundColor: 'orange'
    },
    text3Style: {
        flex: 2,
        backgroundColor: 'yellow'
    },

    text4Style: {
        flex: 1,
        backgroundColor: 'blue'
    },
});

致谢

如果发现有错误的地方,欢迎各位指出,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

CSS学习笔记

<linkhref="*.css" rel="stylesheet" type="text/css"/>

1644
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

841
来自专栏王磊的博客

ReactNative布局样式总结

flex number 用于设置或检索弹性盒模型对象的子元素如何分配空间 flexDirection enum('row', 'row-reverse' ,'c...

29212
来自专栏Android干货

自定义控件详解(四):Paint 画笔路径效果

1624
来自专栏木子昭的博客

<jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

在前端页面的布局过程中,作者遇到了,这样一个问题 当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时...

29410
来自专栏吾爱乐享

php学习之html的标签属性(一)

1423
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

3066
来自专栏程序员互动联盟

css样式大全

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD...

4974
来自专栏coding for love

CSS入门10-替换元素和非替换元素,块级元素和行内元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

800
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native布局详细指南

本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox...

4044

扫码关注云+社区

领取腾讯云代金券