>

入门教程

- 编辑:至尊游戏网站 -

入门教程

React Native基础&入门教程:起首使用Flexbox布局

2018/07/04 · JavaScript · React Native

初藳出处: 蒲桃城控件   

在上篇中,笔者分享了某些装置并调节和测验React Native应用进度里的一点经历,假设尚未曾看过的同学请点击React Native基础&入门教程:调节和测试React Native应用的一小步》。

在本篇里,让咱们龙精虎猛并来打探一下,什么是Flexbox布局,以致哪些行使。

意气风发、长度的单位

在起来任何布局此前,让我们来第如日方升须求精通,在写React Native组件样式时,长度的不带单位的,它代表“与设备像素密度毫无干系的逻辑像素点”。

其黄金时代怎么知道吧?

作者们清楚,荧屏上八个发光的细微点,对应着二个pixel(像素)点。

只要下边多少个矩形,代表四个荧屏大小一样的配备,可是,它们有着的分辨率(resolution)不一致:

图片 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,是每英寸上的像素点,它也可能有个和煦的总结公式,具体这里就不开展了。只必要精晓大家之所以要运用贰个单独于设备分辨率的单位,重若是为着让使用在区别分辨率的设施中,看起来后生可畏致。

在猎豹CS6N中,同样也具备二个看似于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六贰拾一个单位,中度占领6三十七个单位。像素比例是3,实际上那就是三个1080 * 1918 像素的无绳电话机。个中1080 = width * pixelRadio, 1920 = height * pixelRatio

二、Flexbox布局

Flexbox布局,约等于弹性盒模型布局。也会有Android开拓经历的爱人还对LinearLayout,RelativeLayout,FrameLayout等布局方法耿耿于怀,不过对于更精晓CSS的Web开拓者来说,使用flexbox布局一定会让她感触到更加的顺手的成本体验。

卡宴N中的flexbox布局,其实来自CSS中的flexbox(弹性盒子)布局标准。其实它在CSS中还处在Last Call Working Draft(最终搜求意见稿)阶段,不过主流浏览器对它都有了了不起的支撑。在宝马X3N中,大概完全借鉴了内部的布局语义,同一时候更未曾浏览器宽容的一点也不快,用起来是很有益于的。兰德帕杰罗N中只是把CSS的属性用camelCase写法代替连字符写法。后边还还有或者会看见,暗中同意的flex方向也不如。

精晓弹性盒模型布局,首先要通晓多个最基本的概念:Flex Container(容器),Flex Item(项),Flex Direction(方向)和Axis(轴)。

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(主轴)排列,和主轴垂直的轴叫做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中的和奥迪Q3N是相通的。

此间根本分享个人在念书进度中,感觉轻易孳生混淆的八个小点。

率先,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

一、简介

2008年,W3C提议了后生可畏种新的方案----Flex布局,可以方便、完整、响应式地贯彻种种页面布局。

flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。接纳flex布局的因素,称为flex容器(flex Container),简单称谓"容器"。它的具备子元素自动产生容器成员,称为flex项目(flex item),简单称谓"项目"。"容器"对应iOS中的父view概念,"项目"对应iOS中的子view概念。

React Native中的Flexbox的干活原理和web上的CSS基本少年老成致,当然也存在个别差异。首先是暗中认可值分歧:flexDirection的暗中认可值是column实际不是row,而flex也只可以钦赐一个数字值。

全部说,宝马X5N中的Flex布局来自于CSS,不过多少特殊性。中华VN中得以用到的属性,能够在合立陶宛语档中查阅。

二、奥迪Q5N中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

本文由设计建站发布,转载请注明来源:入门教程