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


flexbox规则

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

  • flexDirection
  • alignItems
  • justifyContent

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

flex-direction

flex-wrap

justity-content

align-items

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);

对应的效果为

我们可以容易发现,会按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);

对应的效果为:

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


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);

对应的效果为:

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


简单总结

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

1543
来自专栏React Native开发圈

React Native 文档查看组件

GitHub - forrest23/ReactNativeComponents: React Native组件大全

2441
来自专栏大壮

iOS 动画(理论篇)

1755
来自专栏非著名程序员

基础篇章:关于 React Native 之 Picker 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们就讲Picker ,顾名思义就是选择...

1918
来自专栏程序员宝库

分享前端开发常用代码片段

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

1765
来自专栏進无尽的文章

实践-小效果 II

UIApplication *app = [UIApplication sharedApplication]; // 应用程序右上角数字 app.applica...

1021
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

3962
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

2844
来自专栏电光石火

Markdown 语法手册 (完整整理版)

1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: ...

97011
来自专栏分享达人秀

非常普遍的ProgressBar进度条

不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有APP的开发,还会经常用到...

2415

扫码关注云+社区

领取腾讯云代金券