React Native中的样式,Flexbox布局及其他内容

是时候说说样式与布局了

本章提要

  • 样式
  • 布局
  • Dimensions

样式

在前几章说了一些样式,是不是有点懵了呢?没关系,我们一起看看样式在React Native中的使用。

在React Native中,写样式和写CSS差不多,只不过是把-的连接方式换成了小驼峰式。又把;换成了,,有的时候要把值加上分号,比如这样:

1
background-color: green; ---> backgroundColor: 'green',

实际上,React Native的样式算是CSS的一个子集,当发现有些样式不能用的话不要惊讶,试着换用别的方式来实现就好~

作者君总结了一些常用的样式放到了附录里,可以作为写样式时的参考。

我们知道,代码总是会越写越多,样式也一样。所以为了效率,为了样式的整洁,我们写样式用StyleSheet.create比较好,不过只是写着玩玩的话,
怎么写都好。下面我们来看看这种定义样式的方法

1
2
3
4
5
6
7
8
9
10
11
const styles = StyleSheet.create({
content: {
backgroundColor: '#fff',
height: 50,
width: 100
},
text: {
color: 'blue',
textAlign: 'center'
}
})

然后在组件中这样使用即可:

1
2
3
4
<View style={styles.content}>
<Text style={styles.text}>哈,我是小整洁</Text>
.....
</View>

这样写后,你的代码可读性会提高不少,毕竟样式都像:

1
<Text style={{ fontStyle:'italic', fontSize: 20,... }}

就会变得乱糟糟一团团了。

布局

Flexbox

在React Native中,你可以愉快的使用Flexbox布局,完全不用考虑兼容性(放心,绝对不需要考虑IE6),
如果在浏览器端写过的话,在React Native上继续写这种布局会很是得心应手的。如果没接触过也没关系,这里会很详细的讲的(毕竟很重要)。

首先,我们先瞅瞅Flexbox布局需要用到什么样式:

1
flex, flexDiretion, justifyCotent, alignItems, alignSelf, flexWrap, flexShrink, flexGrow

嗯,先把这些列在这里,有个大概印象就成,我们一会儿再说。

对于Flexbox来说,有一个很重要的概念————轴。理解了轴的概念,使用Flexbox也不会有什么问题了。

对于一个平面来说,它有两个轴,横轴和纵轴,就是下面这样:

PNG

Flexbox用操作这两个轴的方式来完成布局,不过不叫横纵而是叫主次。

当横轴为主轴时,次轴是纵轴:

PNG

当纵轴为主轴时,次轴是横轴:

PNG

看完预备知识,我们可以看看Flexbox是怎么用的了。

首先,要有一个flex容器,如果不指定高度和宽度,它会占满能够占领的最大空间,如果给了高度和宽度,那么会占满你给它的空间。

我们用flex告诉React Native说这是一个使用了弹性布局的组件,就像这样:

1
<View style={{ flex:1 }}></View>

flex后面的数字可以简单的理解为比例

不过呢,我们一般不会只写个flex: 1,我们还得写一些别的东西,就像下面这样:

1
2
<View style={{ flex: 1, flexDirection: 'column', justifyContent:'center', alignItems:'flex-end' }}>
</View>

除了flex: 1,剩下的其实就是用来操作横纵轴的。
flexDirection声明主轴是纵轴,次轴是横轴,用justifyContent声明元素处在主轴的中心位置,用alignItems声明元素处在
次轴的末尾。

我们在View容器里填充一些元素进去,就可以很直观的看到效果:

1
2
3
4
5
<View style={{ flex: 1, flexDirection: 'column', justifyContent:'center', alignItems:'flex-end' }}>
<Text style={{ backgroundColor:'blue'}} >1</Text>
<Text style={{ backgroundColor:'red' }}>2</Text>
<Text style={{ backgroundColor:'green' }}>3</Text>
</View>

效果是这样(虽然比较建议你自己敲一下代码,但是还是把图放在这里比较好):

PNG

至于为啥这个图看起来有些大,是因为作者君把整个模拟器的屏幕截过来了,毕竟要突出元素在主轴中间的效果嘛。

这些还不是全部,毕竟不可能每个整体都是统一的,内部总是要有些不一样的。拿上面的那个例子来说:如果我不想让每个元素都在次轴的末尾,那
该怎么办呢? 很简单,这个时候我们就可以使用alignSelf了。alignSelf可以使容器里的元素和父样式不一样,我们来简单的改造一下上面的例子:

1
<Text style={{ backgroundColor:'green', alignSelf:'flex-start' }}>3</Text>

这样就可以使第三个Text在前面了。就像这样:

PNG

我们再说回flex。我们知道,flex后面是接数字的,数字是这个容器所占的比例,也就是说,后面的数字越大,容器所占比例也就越大。

不过,如果只有flex: 1的话,它会自己占领所有地盘,谁叫没有其它的容器和它抢地盘呢。

position

对于一个App来说,不可能只用到Flexbox,还得用到其他的布局方式。

首先来看绝对布局absolute,绝对布局这名字听起来挺霸气的,实际上也确实霸气,规定元素在那里,那元素就得在那里待着。
我们使用top,bottom,left,right来声明元素的上下左右距容器有多少距离,从而将元素定在那个位置。我们在用绝对布局的时候
需要告诉元素它的布局方式是绝对布局,就像这样:

1
<Text style={{ position: 'absolute', width: 50, height: 50 }}></Text>

只不过我们得事先声明元素的宽度和高度,不然样式会变得很奇怪,然后来定位元素的位置:

1
<Text style={{ position: 'absolute', width:50, height: 50, bottom: 20, left:10 }}>233</Text>

就像这样:

PNG

还有一点得注意,我们需要给父容器一个合适的高度和宽度,比如这样:

1
2
3
4
<View style={{ height:500,width:500 }}>
<Text style={{ position: 'absolute', bottom: 20, left:10, width:50, height: 50 }}>233</Text>
<Text style={{ position: 'absolute', bottom: 20, left:80, width:50, height: 50 }}>233</Text>
</View>

既然有绝对布局,就有相对布局,只不过可能会有些难用。你可以把相对布局理解成一个流,只不过bottom,right不能用。
可以使用top,left更改元素在流中的上,左偏移大小(top,left初始值为0)。下面是个例子:

1
2
3
4
5
<View style={{height:500,width:500}}>
<Text style={{ position: 'relative', left:10, width:50, height: 50 }}>233</Text>
<Text style={{ position: 'relative', left:60, width:50, height: 50 }}>233</Text>
<Text style={{ position: 'relative', left:120, width:50, height: 50 }}>233</Text>
</View>

PNG

Dimensions

在React Native中,我们不能用width: 60%之类的方式来进行布局,那该怎么办嘞?嗯,我们可以换个方式,那就是Dimensions
我们来请Dimensions出场:

1
2
3
import {
Dimensions
} from 'react-native';

然后获取宽度和高度,这里我们用解构赋值的方式:

1
const { width, height } = Dimensions.get("window");

然后就可以在样式中使用喽:

1
<View style={{ width: width * 0.5 ,height: height * 0.5 }}></View>

×

谢谢你请我吃辣条

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 是时候说说样式与布局了
    1. 1.1. 样式
    2. 1.2. 布局
      1. 1.2.1. Flexbox
      2. 1.2.2. position
    3. 1.3. Dimensions
,