ReactNative学习笔记三之布局篇
在学习ReactNative的过程中,除了学会React的相关语法,还有了解布局样式,ReactNative的布局主要是通过style属性来实现的,在ReactNative中一般使用StyleSheet.create来集中定义组件的样式。
StyleSheet.create
当我们打开一个新的工程,可以看到入口文件中有如下代码:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
这就是一个style的集合。当你想使用其中一个style的时候可以:
<Text style={styles.instructions}>
当然,你也可以组合使用,如:
<Text style={[styles.instructions,styles.welcome]}>
这样做,可以把style分类声明,然后组合使用,如果有重叠属性,后声明的属性会覆盖先声明的同名属性。
宽度高度
宽度高度不管对于什么平台来说都是最基本的属性,在ReactNative中,有两种方式来设置宽高。
定值
我把代码改一下,为了方便观看,我这里就不使用StyleSheet.create了:
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
效果如下:
弹性(Flex)宽高
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)。个人感觉这里有点像Android中线性布局的weight。
注意:组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height,也没有设定flex,则父容器的尺寸为零。其子组件如果使用了flex,也是无法显示的。
好了,我把上述代码再改一下试试:
render() {
return (
<View>
<View style={{flex:1, backgroundColor: 'powderblue'}} />
<View style={{flex:2, backgroundColor: 'skyblue'}} />
<View style={{flex:3, backgroundColor: 'steelblue'}} />
</View>
);
}
这样写,运行之后发现啥都不显示,怎么回事,仔细看我上面提到的注意,他需要父容器有尺寸,再改一下:
render() {
return (
<View style={{flex: 1}}>
<View style={{flex:1, backgroundColor: 'powderblue'}} />
<View style={{flex:2, backgroundColor: 'skyblue'}} />
<View style={{flex:3, backgroundColor: 'steelblue'}} />
</View>
);
}
效果图如下:
由于父容器是1,所以充满整个屏幕,然后三个子view按比例充满这个父容器。
flexDirection
看一下上面举的例子,有点像Android的线性布局,方向垂直,但是并没有设置方向,为什么会垂直呢?
因为有一个默认的flexDirection样式属性,默认情况下flexDirection是为column的,当设置为rom,就会是水平方向的了:
render() {
return (
<View style={{flex: 1,flexDirection: 'row'}}>
<View style={{flex:1, backgroundColor: 'powderblue'}} />
<View style={{flex:2, backgroundColor: 'skyblue'}} />
<View style={{flex:3, backgroundColor: 'steelblue'}} />
</View>
);
}
看看效果,从垂直改为水平了吧!
image.pngJustify Content
上面说到了布局的方向,那么Justify Content就是一个标识在布局方向中以什么样的形式进行布局的样式属性。如子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end、space-around以及space-between。
space-between
把上面的代码再改一下,注意,这里不能再使用flex了,因为flex会自动充满,这样就看不到布局效果了。
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
效果如下:
有效果可知,这是在垂直方向上,间距相同的布局方式。
再试试后面几种效果,只需要改变justifyContent属性,代码我就不写了。
flex-start
从开始的地方开始布局:
center
从中间开始布局:
flex-end
从结尾开始布局:
space-around
由下图可知space-around可让子元素在父容器中平均分布,这个与 space-between的区别是, space-between是从最开始的地方开始布局,但是space-around可以这样理解,子元素的中心是在父容器的等分线上。
Align Items
再看一下上面的例子,Justify Content是标识沿着主轴布局方向,进行布局的位置,那次轴(与主轴垂直的轴)呢?这个就需要Align Items了。
子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end以及stretch。
注意:要使stretch选项生效的话,子元素在次轴方向上不能有固定的尺寸。以下面的代码为例:只有将子元素样式中的width: 50去掉之后,alignItems: 'stretch'才能生效。
看代码吧:
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'flex-start',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
这个效果还跟上面的例子一样,这是由于,默认情况下就是flex-start。
接下来修改一下alignItems看看别的样式效果。
center
这个是在中心的效果:
flex-end
这个是在末尾的效果:
stretch
使用stretch属性,在次轴上不能有固定长度,例如我这是垂直布局,那么,在横向上不能有高度,也就是view不能有宽度:
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'stretch',
}}>
<View style={{height: 50, backgroundColor: 'powderblue'}} />
<View style={{ height: 50, backgroundColor: 'skyblue'}} />
<View style={{ height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
效果如下:
总结
关于布局相关的内容暂时介绍到这,至于margin,backgroundcolor等属性,都应该不需要详细介绍,需要的时候直接使用就行。
如果你也做ReactNative开发,并对ReactNative感兴趣,欢迎关注我的公众号,加入我们的讨论群: