本文基于React Native 0.52

Demo上传到Git了,有需要可以看看,写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo

一、主轴方向 flexDirection

  flexDirection决定主轴的排列方向。

  1、column——竖直(默认)

  

2、row——水平

 

二、主轴排列方式 justifyContent 

  justifyContent决定其子元素沿着主轴的排列方式。(以下例子主轴方向为row)

  1、flex-start——子元素靠近主轴起始端

    

  2、flex-end——子元素靠近主轴末尾端

    

  3、center——主轴居中

    

  4、space-around 和 space-between 都是均匀分布,区别如下图

      

三、次轴排列方式 alignItems

  alignItems决定其子元素沿着次轴的排列方式。(以下例子主轴方向为row,次轴方向为column

  1、flex-start——子元素靠近次轴起始端

    

2、flex-end——子元素靠近次轴末尾端

    

3、center——子元素次轴居中

    

4、stretch——子元素撑开、填满次轴(子元素在次轴不能有固定尺寸)

    

四、示例代码

可以自己试着改变看看,需要注意的是alignItems设为stretch时,要把子元素的次轴尺寸去掉(例如主轴方向为row,则去掉height)。

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
} from 'react-native'; // 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window'); export default class category extends Component { render() {
return (
<View style={styles.container}>
<Text>category</Text>
<View style={styles.flexBox}>
<View style={{width: 80, height:80, backgroundColor: 'powderblue'}} />
<View style={{width: 80, height:80, backgroundColor: 'skyblue'}} />
<View style={{width: 80, height:80, backgroundColor: 'steelblue'}} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
flexBox:{
width:width,
height:280,
borderWidth:1, flexDirection:'row',//主轴方向
justifyContent:'space-between', //flex-start,flex-end,center,space-between,space-around
alignItems:'center',//flex-start,flex-end,center,stretch
}
});

  

END-------------------------------------------------------

  

React Native学习(九)—— 使用Flexbox布局的更多相关文章

  1. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  2. React Native(一) FlexBox布局

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...

  3. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  4. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  5. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  6. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  7. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  8. [RN] React Native 使用 FlatList 实现九宫格布局 GridList

    React Native 使用 FlatList 实现九宫格布局 先看图片演示实例: 本文以图片列表为例,实现九宫格布局! 主要有两种方法: 1)方法一: 利用FlatList的 numColumns ...

  9. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

随机推荐

  1. js备战春招の四の严格模式

    JavaScript 严格模式(strict mode)即在严格的条件下运行. use strict 严格模式下你不能使用未申明的变量 "use strict" 指令只运行出现在脚 ...

  2. js实现二叉树

    //binary tree//add order remove findfunction tree() { var node = function(key) {  this.left = null;  ...

  3. UML常用关系

    转载自:http://justsee.iteye.com/blog/808799和http://www.uml.org.cn/oobject/201104212.asp 关系(4种):泛化关系,实现关 ...

  4. WordPress添加显示和隐藏侧边栏按钮开关

    在很多的地方都看见过这种效果,就是在文章页面可以切换显示和隐藏侧边栏功能,感觉还是很有用,比如一篇文章的文字内容过多,那么就可以通过隐藏侧边栏来显示更多的文字便于浏览.比如你可以通过点击我文章标题下方 ...

  5. sudo用法

    sudo的用法    xxx is not in the sudoers file.This incident will be reported.的解决方法   1.切换到root用户下,怎么切换就不 ...

  6. 二叉搜索树(Java实现)

    二叉搜索树基本操作 求树中的结点个数 判断节点是否为空 向树中插入新结点key-value 树中是否存在key 返回树中key对应的value值 先序遍历 中序遍历 后续遍历 层序遍历 求树中key最 ...

  7. 剑指Offer-构建乘积数组

    package Array; import sun.security.util.Length; /** * 构建乘积数组 * 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,... ...

  8. 在oracle中,group by后将字符拼接,以及自定义排序

    1.在oracle中,group by后将字符拼接.任务:在学生表中,有studentid和subject两个字段.要求对studentid进行group by分组,并将所选科目拼接在一起.oracl ...

  9. Maven-02: 依赖

    其实一个依赖声明可以包含如下的一些元素: groupId,artifactId,version:依赖的基本坐标. type:依赖的类型,对应于项目坐标定义的packaging.大多数情况下,该元素不必 ...

  10. JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户

    1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...