在ReactNative中,所有的组件都接收style的属性,类似于Html的css样式.
style属性可以是一个简单的js对象,也可以是一个js对象的数组,数组中后面的样式优先级大于前面的样式,如果重复,以后面的为准.
在写样式的时候可以直接在style属性中直接写,如:
<Text style={{color: 'red'}}>我是红色</Text>也可以通过StyleSheet.create集中管理样式,如:
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: config.css.color.appBackground }, body: { flex: 1 }, item: { flexDirection: 'row', backgroundColor: config.css.color.white, height: 100, width: Dimen.window.width, borderTopWidth: 1, borderTopColor: config.css.color.line } })链接: 布局样式属性查询
屏幕的宽高
我们可以通过Dimensions来获取当前屏幕的宽高:
let window = { width: Dimensions.get('window').width, height: Dimensions.get('window').height }组件的宽高
组件的宽高决定了其在屏幕中的显示的尺寸.
我们可以通过在style中设置width和height来直接设置组件的宽高;
也可以通过设置flex属性来填充空间,通常情况下,我们设置flex: 1指定某个组件填充整个父控件. 当有多个并列的子组件使用flex: 1的时候,子组件会按照当前控件的排列方向平均分配给子组件,类似于android中的weight:
<View style={{flex: 1}}> <View style={{flex: 1}}>view1</View> <View style={{flex: 2}}>view2</View> </View> // 此时View会平分为3份,view1占1份,view2占2份另外当父组件没有固定width和height,或者设置flex的时候,这个时候父组件的尺寸为0,此时,子组件尺寸也将为0,将不会显示出来.
ReactNative的flexbox规则类似于web中的css.
flexDirection
flexDirection可以指定当前view的内部的主轴方向,默认为column沿着Y轴,也可以设置为row沿着x轴.
flexWrap
flexWrap表示View中的子组件达到屏幕宽度的时候是否可以换行,默认是nowrap不换行,可以设置wrap让子组件适应屏幕,进行换行
justifyContent
justifyContent表示当前沿着当前的flexDirection设置的主轴方向上,子组件的排列方式.
flex-start: 默认,居左 center: 居中flex-end: 居右space-between: 两端对齐space-around: 平均分配剩余空间alignItems
alignItems表示与flexDirection相反的轴的子组件的排列方式.
centerflex-startflex-endstretch 拉伸到和父容器相同alignSelf
alignSelf表示子组件自身的在当前View中的排列方式,会覆盖alignItems
flex-startcenterflex-end前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧. 准备通过blog将这段时间学习的东西和踩得坑好好总结. 你也可以认为这是一系列的通过项目学习ReactNative的教程,（￣▽￣）感觉自己在给自己挖坑.
