Android IOS移动开发React Native开发经验集技术干货

ReactNative学习笔记三之布局篇

2017-06-29  本文已影响90人  mymdeep

在学习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.png

Justify 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感兴趣,欢迎关注我的公众号,加入我们的讨论群:

上一篇下一篇

猜你喜欢

热点阅读