当前位置: 永利皇宫463手机版 > Web前端 > 正文

入门教程

时间:2019-11-08 08:22来源:Web前端
React Native根基入门教程:调节和测试ReactNative应用的一小步 》。 在本篇里,让大家一块来理解一下,什么是Flexbox布局,甚至哪些使用。 大器晚成、长度的单位 在初始任何布局从前,让

React Native根基&入门教程:开头使用Flexbox布局

2018/07/04 · JavaScript · React Native

原稿出处: 葡萄城控件   

在上篇中,小编分享了生机勃勃部分设置并调节和测验React Native应用进程里的一点资历,倘使还从未看过的同学请点击React Native幼功&入门教程:调节和测试React Native应用的一小步》。

在本篇里,让大家一块来理解一下,什么是Flexbox布局,甚至哪些使用。

大器晚成、长度的单位

在初始任何布局从前,让大家来第生龙活虎供给明白,在写React Native组件样式时,长度的不带单位的,它意味着“与设施像素密度非亲非故的逻辑像素点”。

以此怎么知道呢?

咱俩明白,显示器上二个发光的纤维点,对应着多个pixel(像素卡塔 尔(阿拉伯语:قطر‎点。

意气风发旦上面七个矩形,代表多个显示屏大小同等的装置,可是,它们持有的分辨率(resolution卡塔 尔(英语:State of Qatar)不相同:

图片 1

图1.风流倜傥致尺寸的器械 差别的分辨率

图上的每三个小格子,其实就表示了三个像素(pixel卡塔尔国。能够看来,多个像素点的抑扬顿挫,在这里个多少个轮廓尺寸相像但装有分化分辨率的装置上,是不相似的。

若是大家以像素为单位来安装叁个分界面成分的轻重,譬喻说2px的中度,那么那2px的尺寸上边的设施中就能是底下这么些样子:

图片 2

图2.见仁见智分辨率下的2px实在中度

它们真实突显出的长短是一点都不大器晚成致的。

咱俩想要意气风发种长度单位,在同样物理尺寸大小的显示屏上(无论分辨率哪个人高哪个人低,只要物理尺寸大小同样就可以卡塔 尔(阿拉伯语:قطر‎,1个单位的长短所表示的情理尺寸是平等的。这种单位就活该是独自于分辨率的,把它起贰个名字叫做 density-independent pixels,简单的称呼dp。那实际上正是Android系统中所使用的长度单位。

譬释尊说,2dp宽,2dp高的开始和结果,在差异分辨率但显示屏尺寸同样的装置上所出示出的大要大小是同样的。(三个题外话:有些Android开拓者提议持有可点击的开关,宽高都不该有限48dp。卡塔尔

图片 3

图3. 2dp * 2dp大小的剧情 在同后生可畏尺寸的显示屏中所占有的情理大小同样

Android中字体大小使用别的一个单位,叫做scale independent pixels,简单称谓sp。那些单位和dp很贴近,可是它常常是用在对字体大小的安装中。通过它设置的书体,能够依靠系统字体大小的更换而改动。

pixel与dp存在一个公式:px = dp * (dpi/160)。

dpi表示dot per inch,是每英寸上的像素点,它也可能有个温馨的计算公式,具体这里就不开展了。只必要明白我们因此要利用三个独自于设备分辨率的单位,重借使为了让使用在不相同分辨率的器具中,看起来生机勃勃致。

在奥迪PB18N中,同样也享有二个相像于dp的尺寸单位。如果我们想精晓自个儿的显示屏以这种长度的测算下是稍微单位,能够通过引进react-native包中的Dimensions获得,同一时间还足以查看本机的像素比例是多少。

import {   Text,   View,   Dimensions,   PixelRatio } from 'react-native'; const { height, width } = Dimensions.get('window'); const pxRatio = PixelRatio.get(); <View style={styles.container}>   <Text style={styles.welcome}>     {`width: ${width}, height: ${height}`}   </Text>   <Text style={styles.welcome}>     {`pixel radio: ${pxRatio}`}   </Text> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
  Text,
  View,
  Dimensions,
  PixelRatio
} from 'react-native';
const { height, width } = Dimensions.get('window');
const pxRatio = PixelRatio.get();
 
<View style={styles.container}>
  <Text style={styles.welcome}>
    {`width: ${width}, height: ${height}`}
  </Text>
  <Text style={styles.welcome}>
    {`pixel radio: ${pxRatio}`}
  </Text>
</View>

来得如下:

图片 4

图4. 当前手提式有线电话机的显示屏新闻

它反映出,当前手提式有线电话机显示器的上涨的幅度占有3六12个单位,中度占领637个单位。像素比例是3,实际上那正是多少个1080 * 1917 像素的手提式有线话机。在那之中1080 = width * pixelRadio, 1920 = height * pixelRatio

二、Flexbox布局

Flexbox布局,也正是弹性盒模型布局。也会有Android开垦阅历的意中人还对LinearLayout,RelativeLayout,FrameLayout等布局方法朝思暮想,可是对于更掌握CSS的Web开垦者来讲,使用flexbox布局一定会让她体会到更为顺手的花费体验。

君越N中的flexbox布局,其实来自CSS中的flexbox(弹性盒子卡塔尔国布局标准。其实它在CSS中还处在Last Call Working Draft(最后搜求意见稿卡塔 尔(英语:State of Qatar)阶段,不过主流浏览器对它都有了四角俱全的帮忙。在哈弗N中,大致统统借鉴了内部的布局语义,同期更未曾浏览器包容的烦懑,用起来是很方便的。福特ExplorerN中只是把CSS的习性用camelCase写法替代连字符写法。后边还还拜访到,暗中认可的flex方向也不如。

驾驭弹性盒模型布局,首先要精晓多个最中央的概念:Flex Container(容器卡塔尔,Flex Item(项卡塔尔国,Flex Direction(方向卡塔 尔(阿拉伯语:قطر‎和Axis(轴卡塔 尔(英语:State of Qatar)。

1.Flex Container

就是包装内容的容器,要求把它的display设置为‘flex’(可能’inline-flex’卡塔尔。

以下6天性格设置在容器上。

  1. alignItems 钦赐item在侧轴上的对齐情势
  2. alignContent 钦点item在多条轴上的对齐情势
  3. flexDirection 钦点主轴方向
  4. flexWrap 钦赐item在主轴方向如何换行
  5. flexFlow flexDirection属性和flexWrap属性的简写格局
  6. justifyContent 钦点item在主轴上的遍及形式

2.Flex Item

容器做直接包裹的因素。所谓弹性盒布局,常常想要布局的事物正是它们。

以下6个个性设置在项目上。

  1. alignSelf 种种item能够独自设置对齐方式 覆盖Flex Container给安装的alignItems
  2. order 钦点item排列顺序 数字越小越靠前
  3. flexGrow 内定item的拉伸比例
  4. flexShrink 钦点item的减少比例
  5. flexBasis 内定item在分配多余空间之前,占主轴的轻重
  6. flex 其实是 flexGrow flexShrink flexBasis的简写

3.Flex Direction and Axis

在弹性盒子中,项目暗许沿着main axis(主轴卡塔 尔(英语:State of Qatar)排列,和主轴垂直的轴叫做cross axis,叫做侧轴,只怕交叉轴。

在盒子中,排列项目又多个样子:水平的正面与反面八个,垂直的正面与反面八个。

组织代码:

<View> <View style={styles.row}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.rowReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.column}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.columnReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

row: { backgroundColor: '#ffe289', flexDirection: 'row' }, rowReverse: { flexDirection: 'row-reverse' }, column: { backgroundColor: '#ffe289', flexDirection: 'column' }, columnReverse: { flexDirection: 'column-reverse' },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
row: {
backgroundColor: '#ffe289',
flexDirection: 'row'
},
rowReverse: {
flexDirection: 'row-reverse'
},
column: {
backgroundColor: '#ffe289',
flexDirection: 'column'
},
columnReverse: {
flexDirection: 'column-reverse'
},

图片 5

图5. flexDirection

出于互连网有关flex布局批注的财富挺丰裕的,读者能够参见最后交给的总是,或然电动上网查找,CSS中的和KugaN是雷同的。

此处根本分享个人在学习进程中,认为轻巧孳生混淆的多个小点。

率先,justify-content和align-content那多个本性,或者比比较简单于搞错它们成效的主旋律。

中间,justify-content是安装items沿着主轴上是什么分布的。align-content是安装items沿着侧轴怎么着对齐的。

要么拿此前的例证,暗中认可情形下,flex的可行性是column(这么些与运动端与web页面分化,在web页面用CSS设置flex布局,暗中同意的fiex-direction是row,即水平从左往右卡塔尔。

在移动端,主轴暗中认可是笔直方向,从上往下。让大家把它的冲天设置高级中学一年级点,放3个item在内部:

结构代码:

<View> <View style={styles.defaultFlex}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex' }

1
2
3
4
5
defaultFlex: {
height: 300,
backgroundColor: '#ffe289',
display: 'flex'
}

图片 6

图6. 默认的flex

justify-content设置items在主轴方向的什么样布满,举例,假若大家加多justifyContent: ‘space-between’

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex', justifyContent: 'space-between' }

1
2
3
4
5
6
defaultFlex: {
height: 300,
backgroundColor: '#ffe289',
display: 'flex',
justifyContent: 'space-between'
}

items就沿主轴分开了。

图片 7

图7. justifyContent: ‘space-between’

要是大家设置alignItems: ‘center’,项目就沿侧轴(这里正是水平轴卡塔尔国居中了。注意这多少个属性是足以同时起功效的。

图片 8

图8. justifyContent: ‘space-between’ 以及 alignItems: ‘center’

下一场,值得提出的是,flex那几个脾性,其实是flexGrow, flexShrink, flexBasis(对应的CSS属性flex-grow, flex-shrink和flex-basis)四本个性的构成。

咱俩一般在运动端观察的flex:1以此设置,其实是对flex-grow的装置。前面一个的暗中认可值为0。使用把flex-grow设置为正整数的不二法门,能够让item按百分比分布,或然在别的item为稳固大小时撑满剩余的盒子空间,就恍如有着弹性相通。

协会代码:

<View style={styles.container}> <View style={styles.flex1}></View> <View style={styles.flex2}></View> <View style={styles.flex3}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>

体制代码:

container: { flex: 1 }, flex1: { // height: 99, flexGrow: 1, backgroundColor: 'orange', }, flex2: { flexGrow: 2, backgroundColor: 'lightblue', }, flex3: { flexGrow: 3, backgroundColor: 'green', },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
container: {
flex: 1
},
flex1: {
// height: 99,
flexGrow: 1,
backgroundColor: 'orange',
},
flex2: {
flexGrow: 2,
backgroundColor: 'lightblue',
},
flex3: {
flexGrow: 3,
backgroundColor: 'green',
},

图片 9

图9. 按比例布满

急需小心的是,若是父容器的尺寸为零(即未有安装宽高,也许还没设定flex卡塔尔国,固然子组件倘若利用了flex,也是力不胜任显示的。

为此这里最外层的行使了flex布局的,flex:1,表示让它攻陷了僵直的全方位空间。

三、小小实战演习

让大家来大概利用flex布局,对在此之前的例子稍加调解,达成三个头顶,尾巴部分固定中度,中间内容占满剩下的显示器的布局:

首先步,调治结构:

<View style={styles.container}> <View style={styles.header}></View> <View style={styles.body}></View> <View style={styles.footer}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>

调动体制:

container: { flex: 1 }, header: { height: 60, backgroundColor: 'orange', }, body: { flexGrow: 1, backgroundColor: 'lightblue', }, footer: { height: 60, backgroundColor: 'green', }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
container: {
flex: 1
},
header: {
height: 60,
backgroundColor: 'orange',
},
body: {
flexGrow: 1,
backgroundColor: 'lightblue',
},
footer: {
height: 60,
backgroundColor: 'green',
}

图片 10

图10. 有头尾的布局

其次部,给header增多标题。

我们让尾部的分成3局地,左侧模拟贰个回到按键,中间呈现标题文字,侧边模拟生龙活虎把小叉:

<View style={styles.header}> <Text style={styles.back}>再次回到</Text> <Text style={styles.title}>那是一个题名</Text> <Text style={styles.exit}>×</Text> </View>

1
2
3
4
5
<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>这是一个标题</Text>
    <Text style={styles.exit}>×</Text>
</View>

急需把header的flexDirection设置为水平方向:

header: { height: 60, backgroundColor: 'orange', flexDirection: 'row', alignItems: 'center' }, back: { color: 'white', marginLeft: 15 }, title: { flexGrow: 1, fontSize: 20, color: 'white', textAlign: 'center' }, exit: { marginRight: 20, fontSize: 20, color: 'white' }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header: {
height: 60,
backgroundColor: 'orange',
flexDirection: 'row',
alignItems: 'center'
},
back: {
color: 'white',
marginLeft: 15
},
title: {
flexGrow: 1,
fontSize: 20,
color: 'white',
textAlign: 'center'
},
exit: {
marginRight: 20,
fontSize: 20,
color: 'white'
}

图片 11

图11. header有了标题

其三步,大家得以把footer三等分,模拟成菜单的理当如此:

<View style={styles.footer}> <Text style={styles.firstMenu}>添加</Text> <Text style={styles.menu}>删除</Text> <Text style={styles.menu}>修改</Text> </View>

1
2
3
4
5
<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>删除</Text>
    <Text style={styles.menu}>修改</Text>
</View>

加上样式:

footer: { height: 60, backgroundColor: 'green', flexDirection: 'row', alignItems: 'center' }, menu: { flexGrow: 1, textAlign: 'center', borderColor: 'white', borderLeftWidth: 1, color: 'white' }, firstMenu: { flexGrow: 1, textAlign: 'center', color: 'white' },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer: {
height: 60,
backgroundColor: 'green',
flexDirection: 'row',
alignItems: 'center'
},
menu: {
flexGrow: 1,
textAlign: 'center',
borderColor: 'white',
borderLeftWidth: 1,
color: 'white'
},
firstMenu: {
flexGrow: 1,
textAlign: 'center',
color: 'white'
},

图片 12

图12. footer三等分 模拟菜单

最终,让大家在body里也填充多少个带按键的输入框。

引进TextInput和Button组件,然后把它们分三组归入body中,

JavaScript

<View style={styles.body}> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="明确"></Button> </View> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="特别鲜明"></Button> </View> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="明确一定以致自然"></Button> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="非常确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定一定以及肯定"></Button>
    </View>
</View>

增多体制:

body: { flexGrow: 1, backgroundColor: 'lightblue', }, inputRow: { flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginRight: 10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body: {
flexGrow: 1,
backgroundColor: 'lightblue',
},
inputRow: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 10,
marginRight: 10
},
textInput: {
flex: 1
},
btn: {
minWidth: 60
}

图片 13

flex布局的三个常用推行是,部分剧情定位宽高,让多余的开始和结果自适应。

像上面那样,大家给Button有叁个纤维宽度,且TextInput的flexGrow为1,那样的做法能够完结,TextInput总是占满剩下的上升的幅度,且可伸缩。

看了地点的例证,是或不是以为在React Native中央银行使Flexbox布局也挺轻巧吗?

指望那是个不利的带头。

1 赞 收藏 评论

图片 14

一、简介

二〇〇八年,W3C提议了生机勃勃种新的方案----Flex布局,能够省事、完整、响应式地促成各类页面布局。

flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采取flex布局的因素,称为flex容器(flex Container卡塔 尔(英语:State of Qatar),简称"容器"。它的全部子成分自动形成容器成员,称为flex项目(flex item卡塔尔国,简单称谓"项目"。"容器"对应iOS中的父view概念,"项目"对应iOS中的子view概念。

React Native中的Flexbox的劳作规律和web上的CSS基本大器晚成致,当然也存在个别差距。首先是暗许值分裂:flexDirection的默许值是column并非row,而flex也只能钦赐叁个数字值。

享有说,奇骏N中的Flex布局来自于CSS,然则有个别特殊性。大切诺基N中得以用到的质量,能够在合英语档中查阅。

二、哈弗N中Flex布局用法

1、基本概念

容器暗中同意存在两根轴:主轴(main axis卡塔尔和交叉轴(cross axis卡塔尔国。主轴的起来地方(与边框的交叉点卡塔 尔(阿拉伯语:قطر‎叫做main start,停止地方叫做main end;交叉轴的启幕地点叫做cross start,甘休地点叫做cross end。项目私下认可沿主轴排列。单个项目侵夺的主轴空间叫做main size,私吞的交叉轴空间叫做cross size。

Flex布局与Android的线性布局(LinearLayout卡塔尔国有点形似,都能够安装布局方向,对齐格局,以至项目标布局占位权重,不同是flex容器中项目布满的总参谋长度超过显示器宽度,超过的这有些项目不可以预知,项目不会变形,大概能够设置flexWrap属性,让容器能够分行布局,全部项目都能显得出来。

相比iOS:FlexBox未有XY轴的概念,主轴和穿插轴不是一直的;也未尝坐标值(x,y)的定义。后文种介绍!

2、Flex基本性情

flex属性注脚在:/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

`// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flexDirection: ReactPropTypes.oneOf([
'row',
'column'
]),

// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
flexWrap: ReactPropTypes.oneOf([
'wrap',
'nowrap'
]),

// How to align children in the main direction
// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justifyContent: ReactPropTypes.oneOf([
'flex-start',
'flex-end',
'center',
'space-between',
'space-around'
]),

// How to align children in the cross direction
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
alignItems: ReactPropTypes.oneOf([
'flex-start',
'flex-end',
'center',
'stretch'
]),

// How to align the element in the cross direction
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
alignSelf: ReactPropTypes.oneOf([
'auto',
'flex-start',
'flex-end',
'center',
'stretch'
]),

//children scale in container view
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex
flex: ReactPropTypes.number,`

由上述代码,大家能够看出flex的性质并相当少,而且很好纪念,以下将会相继介绍
flex属性能够分为容器属性和项目性质
个中容器属性满含:flexDirection,justifyContent,alignItems,flexWrap
花色性质包含:flex,alignSelf
以下介绍会使用到一些代码和图表,先定义四个简易组件,方便清楚

var Circle = React.createClass({
render : function(){
    ;var size = this.props.size || 20;
    var color = this.props.color || '#527fe4';
    return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/>
  },
});

//定义一个放置标题和项目的容器,传入的value属性将会是需要介绍的flex属性
var Value = React.createClass({
  render : function(){
    var value = 
      <View>
        <Text style={styles.valueText}>{this.props.title}</Text>
        <View style={[styles.valueContainer,this.props.value]}>
          {this.props.children}
        </View>
      </View>;
    return value;
  },
});

//定义一个数组放置5个圆
var children = [<Circle/>,<Circle/>,<Circle/>,<Circle/>,<Circle/>];```

###2.1 容器属性

1、flexDirection:布局方向,决定主轴的方向,默认值是column,即纵向布局
描述
row 横向布局,主轴为水平方向
column 纵向布局,主轴为竖直方向

row:横向布局

代码:

<Value title='row' value={{flexDirection:'row'}}>
{children}
</Value>

视图:
![97158B7B-CC32-4769-847F-A08CE7DC209B.png](http://upload-images.jianshu.io/upload_images/2305876-db41bc5aaf500302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

column:纵向布局
代码:

<Value title='column' value={{flexDirection:'column'}}>
{children}
</Value>

视图:

![20160710123731597.jpg](http://upload-images.jianshu.io/upload_images/2305876-602391e00b4d8894.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2、justifyContent:主轴方向对齐方式,子组件和容器的对齐方式,默认值是flex-start,即主轴的开端
描述
flex-start 主轴开端
center 居中
flex-end 主轴末端
space-between 项目与项目之间插入相等空隙
space-around 项目两旁插入相等空隙

flex-start:主轴开始

代码:

<Value title='flex-start' value={{flexDirection:'row', justifyContent:'flex-start'}}>
{children}
</Value>

视图:

![20160710123752426.jpg](http://upload-images.jianshu.io/upload_images/2305876-68f3e2bfcc2d0acf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

center:主轴的中间位置
代码:

<Value title='center' value={{flexDirection:'row',justifyContent:'center'}}>
{children}
</Value>

视图:
![20160710123811612.jpg](http://upload-images.jianshu.io/upload_images/2305876-6ed71436d80ddc31.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

flex-end:主轴的末端位置
代码:

<Value title='flex-end' value={{flexDirection:'row',justifyContent:'flex-end'}}>
{children}
</Value>

视图:
![20160710123828083.jpg](http://upload-images.jianshu.io/upload_images/2305876-c329b7e35a156230.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

space-between:项目与项目之间插入相同距离的空隙
代码:

<Value title='space-between' value={{flexDirection:'row',justifyContent:'space-between'}}>
{children}
</Value>

视图:
![20160710123845099.jpg](http://upload-images.jianshu.io/upload_images/2305876-edef1daaa8fd306a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

space-around:项目两旁插入相同距离的空隙
代码:

<Value title='space-around' value={{flexDirection:'row',justifyContent:'space-around'}}>
{children}
</Value>

视图:

![20160710123859802.jpg](http://upload-images.jianshu.io/upload_images/2305876-72248aac6862b6d3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3、alignItems:交叉轴方向对齐方式,子组件和容器的对齐方式,默认值flex-start,即交叉轴开端
描述
flex-start 交叉轴开端
center 交叉轴居中
flex-end 交叉轴末端

flex-start:交叉轴开首

![20160710123930800.jpg](http://upload-images.jianshu.io/upload_images/2305876-d5b418a97eb8a6c6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
center:交叉轴的中间位置
![20160710123938397.jpg](http://upload-images.jianshu.io/upload_images/2305876-b65919e47a239d3a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
flex-end:交叉轴的末端位置
![20160710123946034.jpg](http://upload-images.jianshu.io/upload_images/2305876-2975afe455bd778b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

flexWrap:包含内容,默认值是nowrap,不包裹所有内容
描述
nowrap 项目沿主轴方向布局,超出容器长度的部分不可见
wrap 项目沿主轴布局所需长度大于容器总长度时,分行布局,所有项目内容都可见

nowrap:不包裹内容

代码:

<Value title='nowrap' value={{flexWrap:'nowrap',flexDirection:'row'}}>
{children}{children}{children}{children}
</Value>

视图:
![20160710124011461.jpg](http://upload-images.jianshu.io/upload_images/2305876-ea4d01dc45b04a19.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

wrap:包裹内容
代码:

<Value title='wrap' value={{flexWrap:'wrap',flexDirection:'row'}}>
{children}{children}{children}{children}
</Value>

视图:
![20160710124019144.jpg](http://upload-images.jianshu.io/upload_images/2305876-fc66d654740f827f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###2.2 项目属性
1、flex:布局权重
描述
>=0 项目占位权重

1:0:flex=0的品种占用空间仅为内容所需空间,flex=1的档案的次序会占领其他全体空中

代码:

<Value title='1:0' value={{flexDirection:'row'}}>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20,paddingHorizontal:10}}>flex=1</Text>
<Text style={{color:'white',textAlign:'center',backgroundColor:'yellow',fontSize:20,paddingHorizontal:10}}>flex=0</Text>
</Value>

![20160710124042149.jpg](http://upload-images.jianshu.io/upload_images/2305876-b79e28b56be5c95b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2:1
代码:

<Value title='2:1' value={{flexDirection:'row'}}>
<Text style={{color:'white',flex:2,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=2</Text>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>
</Value>

![20160710124050258.jpg](http://upload-images.jianshu.io/upload_images/2305876-b97631c340b6e98c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
1:1:1:1
代码:

<Value title='1:1:1:1' value={{flexDirection:'row'}}>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20}}>flex=1</Text>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'yellow',fontSize:20}}>flex=1</Text>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=1</Text>
<Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>

</Value>
![20160710124105801.jpg](http://upload-images.jianshu.io/upload_images/2305876-dcbb3b1500328ef8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2、alignSelf:项目交叉轴方向自身对齐方式,子组件和容器的对齐方式,会覆盖alignItems的设置。
描述
flex-start 开端
center 居中
flex-end 末端
代码:

<Value title='alignSelf' value={{flexDirection:'row',height:30,alignItems:'center'}}>
<View style={{alignSelf:'flex-start'}}>
<Circle/>
</View>
<View style={{alignSelf:'flex-end'}}>
<Circle/>
</View>
<View style={{alignSelf:'flex-start'}}>
<Circle/>
</View>
<View style={{alignSelf:'flex-end'}}>
<Circle/>
</View>
<View style={{alignSelf:'flex-start'}}>
<Circle/>
</View>
</Value>

视图:
![20160710124121472.jpg](http://upload-images.jianshu.io/upload_images/2305876-97483e4bb247ab2d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##3、 Layout的其他属性
layout除了flex属性之外,当然还有其他属性,同样声明在:/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

width: ReactPropTypes.number,
height: ReactPropTypes.number,
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
margin: ReactPropTypes.number,
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number,
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,

position: ReactPropTypes.oneOf([
'absolute',
'relative'
]),

属性 类型 描述
width number 容器或者项目的宽度
height number 容器或者项目的高度
top,bottom,left,right number 在父容器的上下左右偏移量
margin number 留边,留边的空间不属于容器或者项目自身空间
marginHorizontal number 水平方向留边
marginVertical number 垂直方向留边
padding number 填充,填充的空间输入容器或者项目自身空间
paddingHorizontal number 水平方向填充
paddingVertical number 垂直方向填充
borderWidth number 边界宽度
position enum 位置方式:absolute与relative
position:默认值为relative
描述
absolute 绝对布局
relative 相对布局
react的默认位置方式是relative,项目是一个接一个排列下去的,absolute为绝对布局,一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来,absolute属性就能发挥作用了,例如下图:
![20160710124137682.jpg](http://upload-images.jianshu.io/upload_images/2305876-1f7da8cfd80aa011.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

react的基本组件暂时不支持以图片作为背景,所以这里的的转入是一个文本组件,而红色的圆形是一个图片组件,在iOS里面组件也可以作为容器,图片可以正常显示,但是在Android里面,可能存在些问题,如果使用组件作为容器都会出现图片变得好奇怪,所以就可以absoulte来解决问题了。代码如下:

<View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}>
<Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_into')}/>
<Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>转入</Text>
</View>

这里的View跟Android的View有点不一样,View是可以作为容器也可以作为项目,View作为容器还有其他很多属性,例如backgroundColor,borderWidth,borderColor,opacity等等,这里不一一介绍。
**注意:absolute时,控件的上下左右是相对于container;relative时,控件用的是marginLeft,marginTop,marginBottom,marginRight,分别相对于left,top,bottom,right的元素(container或者item)。**

4 布局的尺寸说明
react native的宽高是不需要带单位的,那些width,height,padding,margin的赋值都直接是数字的,当你设定width:10,在IOS的话就是设置了10pt宽度,而在Android上面是10dp,在做项目时,辛勤的美工会帮我们标出所有UI控件的宽,高,边距等等,他们用的单位也是dp,所以赋值style中宽高时,直接填入数字即可。

alignItems 和 alignSelf区别

alignItems

调整伸缩项目在侧轴上的定位方式

可选值: flex-start , flex-end , center , stretch

![20160710123625127.jpg](http://upload-images.jianshu.io/upload_images/2305876-2e1383a71736424a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

alignSelf

alignSelf 属性会覆盖容器的 alignItems 属性,取值和用法 alignItems 一样。

可选值: auto , flex-start , flex-end , center , stretch

参考链接:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://blog.csdn.net/teng_ontheway/article/details/51870951
https://segmentfault.com/a/1190000002658374

编辑:Web前端 本文来源:入门教程

关键词: