一:理论知识点
1: 什么是 FlexBox 布局
弹性盒模型(The Flexible Box Module), 又叫 Flexbox,意为 "弹性布局",旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。
Flex 布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间;
2:Flex 布局基于 flex-flow 流
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
项目默认沿主轴排列,单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
根据伸缩项目排列方式的不同,主轴和侧轴方向也有所变化
3: 在 React 中,Flexbox 有 6 种容器属性,6 种项目属性。而在 React Native 中,有 4 个容器属性,2 个项目属性,分别是:
容器属性:flexDirection flexWrap justifyContent alignItems
项目属性:flex alignSelf
3.1: flexDirection 容器属性: `row | row-reverse | column | column-reverse`
该属性决定主轴的方向(即项目的排列方向)。
row:主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column(默认值):主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
3.2:flexWrap 容器属性: `nowrap | wrap | wrap-reverse`
默认情况下,项目都排在一条线(又称 "轴线")上。flex-wrap 属性定义,如果一条轴线排不下,如何换行。
3.2.1 nowrap(默认值):不换行
3.2.2 wrap:换行,第一行在上方
3.2.3 wrap-reverse:换行,第一行在下方。(和 wrap 相反)
3.3:justifyContent 容器属性:`flex-start | flex-end | center | space-between | space-around`
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值):伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐,项目之间的间隔都相等。
space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。
3.4:alignItems 容器属性:`flex-start | flex-end | center | baseline | stretch`
定义项目在交叉轴上如何对齐,可以把其想像成侧轴(垂直于主轴)的 "对齐方式"。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐 。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。
3.5:flex 项目属性:
"flex-grow"、"flex-shrink" 和 "flex-basis" 三个属性的缩写, 其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。默认值为 "0 1 auto"。
宽度 = 弹性宽度 * (flexGrow / sum( flexGorw) )
3.6:alignSelf 项目属性:
"auto | flex-start | flex-end | center | baseline | stretch"
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
二:代码实例:
1:简单布局
- import React,
- {
- Component
- }
- from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View
- }
- from 'react-native';
- class ReactNativeProject extends Component {
- render() {
- return (2, backgroundColor: '#bbceee', flexDirection: 'row'
- }
- } >
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1
- },
- viewItem1: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- backgroundColor: '#FF33CC'
- },
- viewItem2: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- marginTop: 15,
- backgroundColor: '#00FFFF'
- },
- viewItem3: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- backgroundColor: '#CCBBFF'
- },
- });AppRegistry.registerComponent('ReactNativeProject', () = >ReactNativeProject);
效果图:
说明:return 返回只能是一个对象,所以在最外层包含的一个 View, 里面放置四个 View, 并对它们进行布局;
最后一个 View 的 flex 属性让它比起其它的权重要大,所以高度会是其它的对应倍数值,上面还分开两种写法,一种是在下面用样式属性编写,另一个是直接在布局里面写样式,注意它们的差别,建议分开写;里面四个子 View 我们都让它以 flexDirection 为 row 方式进行排列;
2: 布局属性运用:
- import React,
- {
- Component
- }
- from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View
- }
- from 'react-native';
- class ReactNativeProject extends Component {
- render() {
- return (1, height: 40, backgroundColor: 'red'
- }
- } > 1,
- height: 40,
- backgroundColor: 'blue',
- alignSelf: 'center'
- }
- } > 1,
- height: 40,
- backgroundColor: 'red',
- alignSelf: 'flex-end'
- }
- } >
- 2, backgroundColor: '#bbceee', flexDirection: 'row'
- }
- } > 1, height: 100, flexDirection: 'row', justifyContent: 'center', marginTop: 30
- }
- } > 100, backgroundColor: 'red'
- }
- } > 70, backgroundColor: 'blue'
- }
- } >
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1
- },
- viewItem1: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- backgroundColor: '#FF33CC'
- },
- viewItem2: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- marginTop: 15,
- backgroundColor: '#00FFFF',
- flexWrap: 'wrap'
- },
- viewItem2Child1: {
- width: 200,
- height: 30,
- backgroundColor: 'green'
- },
- viewItem2Child2: {
- width: 200,
- height: 30,
- backgroundColor: 'red'
- },
- viewItem3: {
- flex: 1,
- flexDirection: 'row',
- height: 50,
- backgroundColor: '#CCBBFF'
- },
- viewItem3Child1: {
- flex: 1,
- backgroundColor: '#00ffbb'
- },
- viewItem3Child2: {
- flex: 1,
- backgroundColor: '#aabbdd'
- },
- viewItem3Child3: {
- flex: 1,
- backgroundColor: '#0000ff'
- }
- });AppRegistry.registerComponent('ReactNativeProject', () = >ReactNativeProject);
在实例 1 的基础上,对其它属性进一步运用;效果图如下:
第一个 View 包含三个 View, 主要是实现针对 alignSelf 属性的运用;
第二个 View 包含二个 View, 两个 View 的宽度之合大于屏幕宽度,主要是实现针对 flexWrap 属性的运用;
第三个 View 包含三个 View, 主要是针对 flex 的运用
第四个 View 包含有两个 View, 主要是针对 justifyContent 跟属性 marginTop 的运用;
三:其它知识点:
1:获取当前屏幕的宽度、高度、分辨率
- import Dimensions from 'Dimensions';
- var {
- width, height, scale
- } = Dimensions.get('window');
- render() {
- return (
- 屏幕的宽度: {
- width + '\n'
- }屏幕的高度: {
- height + '\n'
- }屏幕的分辨率: {
- scale + '\n'
- }
- );
- }
2:默认宽度
3:水平、垂直居中
当 alignItems、justifyContent 传 center 时与 flexDirection 的关系:
想理解这个很简单,看我上班讲的 alignItems、justifyContent,心里想着主轴和次轴就可以理解,justifyContent 是主轴方向居中,而 alignItems 是次轴方向居中,flexDirection 默认为 column,所以误区会认为 alignItems 为水平居中,justifyContent 为垂直居中。
4:padding 和 margin
margin 是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在 CSS 中 padding 是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离,下面这张是 CSS 的效果图,只是名字不一样(marginTop),原理都是一样;
5:关于样式
(1)普通内联样式:{{}}, 第一层{}是表达式,第二层{}是 js 对象;
<View style={{fontSize:40, width:80,}}> </View>
(2)调用样式表:{样式类. 属性}
<View style={styles.container}></View>
(3)样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
(4)多个样式表:{[样式类 1, 样式类 2]}
<View style={[styles.container, styles.color]}>
6:React Native 样式属性列表
- "alignItems",
- "alignSelf",
- "backfaceVisibility",
- "backgroundColor",
- "borderBottomColor",
- "borderBottomLeftRadius",
- "borderBottomRightRadius",
- "borderBottomWidth",
- "borderColor",
- "borderLeftColor",
- "borderLeftWidth",
- "borderRadius",
- "borderRightColor",
- "borderRightWidth",
- "borderStyle",
- "borderTopColor",
- "borderTopLeftRadius",
- "borderTopRightRadius",
- "borderTopWidth",
- "borderWidth",
- "bottom",
- "color",
- "flex",
- "flexDirection",
- "flexWrap",
- "fontFamily",
- "fontSize",
- "fontStyle",
- "fontWeight",
- "height",
- "justifyContent",
- "left",
- "letterSpacing",
- "lineHeight",
- "margin",
- "marginBottom",
- "marginHorizontal",
- "marginLeft",
- "marginRight",
- "marginTop",
- "marginVertical",
- "opacity",
- "overflow",
- "padding",
- "paddingBottom",
- "paddingHorizontal",
- "paddingLeft",
- "paddingRight",
- "paddingTop",
- "paddingVertical",
- "position",
- "resizeMode",
- "right",
- "rotation",
- "scaleX",
- "scaleY",
- "shadowColor",
- "shadowOffset",
- "shadowOpacity",
- "shadowRadius",
- "textAlign",
- "textDecorationColor",
- "textDecorationLine",
- "textDecorationStyle",
- "tintColor",
- "top",
- "transform",
- "transformMatrix",
- "translateX",
- "translateY",
- "width",
- "writingDirection"
四:问题
1:当出现下面这张图一般是 JS 代码出错了,要么是样式或者布局不正确引起;
来源: http://www.cnblogs.com/wujy/p/5841685.html