React Native学习(九)—— 使用Flexbox布局
本文基于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布局的更多相关文章
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
- React Native(一) FlexBox布局
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...
- React Native 开发之 (05) flexbox布局
一 flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- [RN] React Native 使用 FlatList 实现九宫格布局 GridList
React Native 使用 FlatList 实现九宫格布局 先看图片演示实例: 本文以图片列表为例,实现九宫格布局! 主要有两种方法: 1)方法一: 利用FlatList的 numColumns ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
随机推荐
- js备战春招の四の严格模式
JavaScript 严格模式(strict mode)即在严格的条件下运行. use strict 严格模式下你不能使用未申明的变量 "use strict" 指令只运行出现在脚 ...
- js实现二叉树
//binary tree//add order remove findfunction tree() { var node = function(key) { this.left = null; ...
- UML常用关系
转载自:http://justsee.iteye.com/blog/808799和http://www.uml.org.cn/oobject/201104212.asp 关系(4种):泛化关系,实现关 ...
- WordPress添加显示和隐藏侧边栏按钮开关
在很多的地方都看见过这种效果,就是在文章页面可以切换显示和隐藏侧边栏功能,感觉还是很有用,比如一篇文章的文字内容过多,那么就可以通过隐藏侧边栏来显示更多的文字便于浏览.比如你可以通过点击我文章标题下方 ...
- sudo用法
sudo的用法 xxx is not in the sudoers file.This incident will be reported.的解决方法 1.切换到root用户下,怎么切换就不 ...
- 二叉搜索树(Java实现)
二叉搜索树基本操作 求树中的结点个数 判断节点是否为空 向树中插入新结点key-value 树中是否存在key 返回树中key对应的value值 先序遍历 中序遍历 后续遍历 层序遍历 求树中key最 ...
- 剑指Offer-构建乘积数组
package Array; import sun.security.util.Length; /** * 构建乘积数组 * 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,... ...
- 在oracle中,group by后将字符拼接,以及自定义排序
1.在oracle中,group by后将字符拼接.任务:在学生表中,有studentid和subject两个字段.要求对studentid进行group by分组,并将所选科目拼接在一起.oracl ...
- Maven-02: 依赖
其实一个依赖声明可以包含如下的一些元素: groupId,artifactId,version:依赖的基本坐标. type:依赖的类型,对应于项目坐标定义的packaging.大多数情况下,该元素不必 ...
- JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户
1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...