[ReactNative] 02--style & width/height & FlexBox

style

在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,将不会显示出来.

Flexbox

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

相反的轴的子组件的排列方式.

center

flex-start

flex-end

stretch 拉伸到和父容器相同

alignSelf

alignSelf

表示子组件自身的在当前View中的排列方式,会覆盖

alignItems

flex-start

center

flex-end

后记

前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧.

准备通过blog将这段时间学习的东西和踩得坑好好总结.

你也可以认为这是一系列的通过项目学习ReactNative的教程,（￣▽￣）感觉自己在给自己挖坑.