ReactNative学习笔记三之布局篇

2019年6月5日 285次阅读 来源: 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>
    );
  }

效果如下：

《ReactNative学习笔记三之布局篇》

弹性（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>
    );
  }

效果图如下：

《ReactNative学习笔记三之布局篇》

由于父容器是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>
    );
  }

看看效果，从垂直改为水平了吧！

《ReactNative学习笔记三之布局篇》 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>
        );
    }

效果如下：

《ReactNative学习笔记三之布局篇》

有效果可知，这是在垂直方向上，间距相同的布局方式。
再试试后面几种效果，只需要改变justifyContent属性，代码我就不写了。

flex-start

从开始的地方开始布局：

《ReactNative学习笔记三之布局篇》

center

从中间开始布局：

《ReactNative学习笔记三之布局篇》

flex-end

从结尾开始布局:

《ReactNative学习笔记三之布局篇》

space-around

由下图可知space-around可让子元素在父容器中平均分布，这个与 space-between的区别是， space-between是从最开始的地方开始布局，但是space-around可以这样理解，子元素的中心是在父容器的等分线上。

《ReactNative学习笔记三之布局篇》

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

这个是在中心的效果：

《ReactNative学习笔记三之布局篇》

flex-end

这个是在末尾的效果：

《ReactNative学习笔记三之布局篇》

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

效果如下：

《ReactNative学习笔记三之布局篇》

总结

关于布局相关的内容暂时介绍到这，至于margin，backgroundcolor等属性，都应该不需要详细介绍，需要的时候直接使用就行。
如果你也做ReactNative开发，并对ReactNative感兴趣，欢迎关注我的公众号，加入我们的讨论群：

《ReactNative学习笔记三之布局篇》

    原文作者：mymdeep
    原文地址: https://www.jianshu.com/p/fa9ff7e3c507
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞