为了账号安全,请及时绑定邮箱和手机立即绑定

React Native学习(五):使用Flexbox布局

flexbox规则

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。
Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
一般来说,使用

  • flexDirection

  • alignItems

  • justifyContent

三个样式属性就已经能满足大多数布局需求。
译注:这里有一份简易布局图解,可以给你一个大概的印象。
这里自己贴一下这个网站的口诀片:

  • webp

    flex-direction

  • webp

    flex-wrap

  • webp

    justity-content

  • webp

    align-items

  • webp

    align-content

大体也就是下面几种情况,背背就熟悉了

  • flex-direction

    • row

    • row-reverse

    • column

    • column-reverse

  • flex-wrap

    • nowrap

    • wrap

    • wrap-reverse

  • justity-content(no flex : 1)

    • flex-start

    • center

    • flex-end

    • space-between

    • space-around

  • align-items 【(nowrap)align-self】

    • flex-start

    • center

    • flex-end

    • stretch

  • align-content(wrap)

    • stretch

    • flex-start

    • center

    • flex-end

    • space-between

    • space-around

React Native中的Flexbox的工作原理和web上的CSS基本一致,当然也存在少许差异。
首先是默认值不同:
flexDirection的默认值是column而不是row,
alignItems的默认值是stretch而不是flex-start,
以及flex只能指定一个数字值。


Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴
子元素是应该沿着水平轴(row)方向排列,
还是沿着竖直轴(column)方向排列呢?
默认值是竖直轴(column)方向。

简单的代码例子:

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';class ABegin extends Component {
  render() {    return (      // 尝试把`flexDirection`由`row`改为`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为


webp

我们可以容易发现,会按row去排列布局


Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴排列方式
子元素是应该靠近主轴的起始端还是末尾段分布呢?
亦或应该均匀分布?
对应的这些可选项有:

  • flex-start

  • center

  • flex-end

  • space-around

  • space-between

简单的代码例子:

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';class ABegin extends Component {
  render() {    return (      // 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为:


webp

例子比较简单,不解释了
可以简单修改看看


Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴
(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式
子元素是应该靠近次轴的起始端还是末尾段分布呢?
亦或应该均匀分布?
对应的这些可选项有:

  • flex-start

  • center

  • flex-end

  • stretch

简单的代码例子:

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';class ABegin extends Component {
  render() {    return (      // 尝试把`alignItems`改为`flex-start`看看
      // 尝试把`justifyContent`改为`flex-end`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为:


webp

根据上面的总结,也很好理解。


简单总结

这里也就一些需要记忆的地方
一些参考说明
具体解释,可以参考上图,或者参考说明

具体代码,
可以见
https://github.com/2954722256/react-native-demo
因为自己是拿android测试的
所以注意修改代码为:index.android.js



作者:dodo_lihao
链接:https://www.jianshu.com/p/4fa2b58d2d25


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消