快捷搜索:
来自 新京葡娱乐场网址 2019-07-04 11:52 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

入门教程

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,是每英寸上的像素点,它也会有个和谐的总结公式,具体这里就不开始展览了。只需求精晓大家为此要动用多少个单身于设备分辨率的单位,首要是为着让使用在分化分辨率的设施中,看起来一致。

在摩根Plus 4N中,同样也具有贰个近似于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 * 1919 像素的无绳电电话机。个中1080 = width * pixelRadio, 1920 = height * pixelRatio

二、Flexbox布局

Flexbox布局,也等于弹性盒模型布局。也有Android开采经历的情侣还对LinearLayout,RelativeLayout,FrameLayout等布局方法历历在目,可是对于更明白CSS的Web开采者来讲,使用flexbox布局一定会让她感触到特别顺手的开销体验。

WranglerN中的flexbox布局,其实来自CSS中的flexbox(弹性盒子)布局标准。其实它在CSS中还处在Last Call Working Draft(最后征求意见稿)阶段,可是主流浏览器对它都有了精良的支撑。在中华VN中,差不离全盘借鉴了个中的布局语义,同一时候更未曾浏览器包容的抑郁,用起来是很有利的。宝马7系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中的和HighlanderN是相通的。

此处最首要共享个人在攻读进程中,感到轻巧引起混淆的五个小点。

先是,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),简称"容器"。它的装有子成分自动造成容器成员,称为flex项目(flex item),简称"项目"。"容器"对应iOS中的父view概念,"项目"对应iOS中的子view概念。

React Native中的Flexbox的职业规律和web上的CSS基本一致,当然也设有些差距。首先是暗中同意值差异:flexDirection的暗许值是column而不是row,而flex也只能内定二个数字值。

有着说,奥迪Q5N中的Flex布局来自于CSS,不过某个特殊性。RAV4N中能够用到的性质,能够在官方文档中查阅。

二、路虎极光N中Flex布局用法

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:入门教程

关键词: