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

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,是每英寸上的像素点,它也可以有个谐和的总括公式,具体这里就不实行了。只供给领悟大家因此要利用一个独门于设备分辨率的单位,主倘诺为着让使用在分化分辨率的装置中,看起来一致。

在HuayraN中,一样也存有二个近似于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 * 壹玖壹捌 像素的无绳电话机。当中1080 = width * pixelRadio, 1920 = height
* pixelRatio

二、Flexbox布局

Flexbox布局,相当于弹性盒模型布局。也可能有Android开荒经历的情人还对LinearLayout,RelativeLayout,FrameLayout等布局方法言犹在耳,不过对于更驾驭CSS的Web开垦者来说,使用flexbox布局一定会让他感触到越发顺手的支付体验。

福特ExplorerN中的flexbox布局,其实来自CSS中的flexbox(弹性盒子)布局规范。其实它在CSS中还处于Last
Call Working
Draft(最后征求意见稿)阶段,不过主流浏览器对它都有了完美的支撑。在奥迪Q5N中,大概统统借鉴了在那之中的布局语义,同临时候更未曾浏览器包容的沉郁,用起来是很便利的。昂CoraN中只是把CSS的属性用camelCase写法取代连字符写法。前面还还拜见到,默许的flex方向也分歧。

React Native基础&入门教程:起始使用Flexbox布局。知晓弹性盒模型布局,首先要明白几个最基本的概念: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. React Native基础&入门教程:起始使用Flexbox布局。justifyContent 内定item在主轴上的遍及情势

2.Flex Item

容器做直接包裹的成分。所谓弹性盒布局,平日想要布局的东西便是它们。

以下6个属性设置在品种上。

  1. React Native基础&入门教程:起始使用Flexbox布局。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

React Native基础&入门教程:起始使用Flexbox布局。在弹性盒子中,项目私下认可沿着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中的和ENCOREN是相通的。

此间根本共享个人在就学进度中,感到轻便引起混淆的多少个小点。

率先,justify-content和align-content那多个本性,或许比较便于搞错它们功效的自由化。

个中,justify-content是安装items沿着主轴上是何等布满的。align-content是设置items沿着侧轴如何对齐的。

或许拿从前的例证,暗中同意情形下,flex的大方向是column(这么些与移动端与web页面分裂,在web页面用CSS设置flex布局,默许的fiex-direction是row,即水平从左往右)。

在移动端,主轴默许是垂直方向,从上往下。让我们把它的冲天设置高级中学一年级点,放3个item在个中:

React Native基础&入门教程:起始使用Flexbox布局。组织代码:

<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: ‘#React Native基础&入门教程:起始使用Flexbox布局。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

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图