[React Native混合开发]React Native中的Flexbox布局
来源:互联网 发布:大数据分析研判 编辑:程序博客网 时间:2024/05/16 09:52
一 摘要
今天来介绍一下React Native中的布局,在React Native混合开发中采用的布局主要是Flexbox,没有接触过HTML5,对这些布局可能非常陌生.
今天给大家总结一下,首先我们还是来看看它的弹性布局概述.
二 基本原理
CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,
即实现非常灵活的布局处理。我们来看一下别人画的一个原理图
容器上有 主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下。其中所有的孩子的布局都会受到这两个轴的影响。后面会讲到,有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。弹性盒布局的指定方法为:对需要布局的元素的容器元素使用display:flex;样式属性。
该容器元素中的每一个元素均被称为“Flex item”,将该容器元素称为“Flex container”。可以通过flex-direction样式属性的使用来控制容器中所有子元素的排列方向,可指定值如下所示。
row:横向排列(默认值)row-reverse:横向反向排列column:纵向排列column-reverse:纵向反向排列
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,StyleSheet} from 'react-native';class shoppApp extends Component { render() { return ( // 尝试把`flexDirection`改为`column`看看 <View style={{flex: 1, flexDirection: 'row'}}> <View style={styles.pic1} /> <View style={styles.pic2} /> <View style={styles.pic3} /> <View style={styles.pic2} /> </View> ); }};//具体演示const styles = StyleSheet.create({ pic1:{ width: 100, height: 200, backgroundColor: 'red' }, pic2:{ width: 100, height: 200, backgroundColor: 'blue' }, pic3:{ width: 100, height: 200, backgroundColor: 'red' },});//注册AppRegistry.registerComponent('shoppApp', () => shoppApp);
效果图
四 Justify Content
在组件的style中指定
justifyContent
可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start
、center
、flex-end
、space-around
以及space-between
。
//引入框架import React, { Component } from 'react';import { AppRegistry, StyleSheet,View } from 'react-native';class shoppApp extends Component { render() { return ( // 尝试把`justifyContent`改为`center`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <View style={styles.pic1} /> <View style={styles.pic2} /> <View style={styles.pic3} /> </View> ); }};//具体样式const styles = StyleSheet.create({ pic1:{ width: 100, height: 200, backgroundColor: 'red' }, pic2:{ width: 100, height: 200, backgroundColor: 'blue' }, pic3:{ width: 100, height: 200, backgroundColor: 'red' },});//注册AppRegistry.registerComponent('shoppApp', () => shoppApp);
效果展示
五 Align Items
在组件的style中指定
alignItems
可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row
,则次轴方向为column
)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start
、center
、flex-end
以及stretch
。注意:要使
stretch
选项生效的话,子元素在次轴方向上不能有固定的尺寸。以下面的代码为例:只有将子元素样式中的width: 50
去掉之后,alignItems: 'stretch'
才能生效。
框架导入
import React, { Component } from 'react';import { AppRegistry, View, StyleSheet} from 'react-native';
定义shopApp类
class shoppApp extends Component { render() { return ( // 尝试把`alignItems`改为`flex-start`看看 // 尝试把`justifyContent`改为`flex-end`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}> <View style={styles.pic1} /> <View style={styles.pic2} /> <View style={styles.pic3} /> </View> ); }};
样式列表
const styles = StyleSheet.create({ pic1:{ width: 100, height: 200, backgroundColor: 'red' }, pic2:{ width: 100, height: 200, backgroundColor: 'blue' }, pic3:{ width: 100, height: 200, backgroundColor: 'red' },});
注册
AppRegistry.registerComponent('shoppApp', () => shoppApp);
运行效果
- [React Native混合开发]React Native中的Flexbox布局
- React Native中的flexbox布局
- React Native-FlexBox布局
- React Native Flexbox布局
- React Native FlexBox布局
- React Native FlexBox布局
- React Native FlexBox布局
- 2、React Native中的flexbox布局
- flexbox----react native中的布局方式
- React-Native中的flexbox布局的使用
- React Native 之 flexbox布局
- React-Native之flexbox布局
- (一)React Native---FlexBox 布局
- React Native 弹性布局FlexBox
- React Native布局之FlexBox
- React Native 之 Flexbox 布局
- React Native之Flexbox布局
- react-native 使用Flexbox布局
- Android 和 Java 内存泄露检测
- Course Schedule II
- 如何判断链表是否存在环和求链表中间节点
- 华为OJ 棋盘格子路径
- 类加载器的工作原理【转载】
- [React Native混合开发]React Native中的Flexbox布局
- C++类定义与实现(Class)
- poj 1679 次小生成树 The Unique MST
- HDU 5407 CRB and Candies(素数筛 + 逆元 + 组合数公式)——2015 Multi-University Training Contest 10
- 试水Fragment(3)-5min仿微信主界面
- 喷水装置(二) nyoj
- (转)解决Ubuntu自动挂载U盘/SD Card变成只读问题
- linux学习之计算机基础(四)
- Angular.js中使用$watch监听模型变化