[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
  }
})

链接: 布局样式属性查询

宽高

1. 屏幕的宽高

   我们可以通过Dimensions来获取当前屏幕的宽高:

   let window = {
       width: Dimensions.get('window').width,
       height: Dimensions.get('window').height
   }

2. 组件的宽高

   组件的宽高决定了其在屏幕中的显示的尺寸.

   我们可以通过在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.

1. flexDirection

   flexDirection可以指定当前view的内部的主轴方向,默认为column沿着Y轴,也可以设置为row沿着x轴.

2. flexWrap

   flexWrap表示View中的子组件达到屏幕宽度的时候是否可以换行,默认是nowrap不换行,可以设置wrap让子组件适应屏幕,进行换行

3. justifyContent

   justifyContent表示当前沿着当前的flexDirection设置的主轴方向上,子组件的排列方式.

   • flex-start: 默认,居左
   • center: 居中
   • flex-end: 居右
   • space-between: 两端对齐
   • space-around: 平均分配剩余空间

4. alignItems

   alignItems表示与flexDirection相反的轴的子组件的排列方式.

   • center
   • flex-start
   • flex-end
   • stretch 拉伸到和父容器相同

5. alignSelf

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

   • flex-start
   • center
   • flex-end

后记

前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧.
准备通过blog将这段时间学习的东西和踩得坑好好总结.
你也可以认为这是一系列的通过项目学习ReactNative的教程,（￣▽￣）感觉自己在给自己挖坑.