ReactNative之样式

本节介绍：

样式
高度与宽度
使用Flexbox布局

样式

在ReactNative中仍然使用JavaScript来写样式，所有组件都接受名为style的属性。这些样式名基本上是遵循了Web上的CSS命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

使用StyleSheet.create来几种定义组件的样式

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    alignItems: "center",
  },
  bigBlue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 40,
  },
  red: {
    color: "red"
  },
});

module.exports = LotsOfStyles;

运行结果：

运行结果.png

高度与宽度

• 指定宽高

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

class LotsOfStyles extends Component {
  render() {
    return(
      <View>
        <View style={{width: 50, height: 50, backgroundColor: "powderblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{width: 150, height: 150, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

• 弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态的扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比，也就是权重）。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

class LotsOfStyles extends Component {
  render() {
    return(
      // 父容器设定很重要，如果父容器没有设定width和height，也没有设定flex，则父容器的尺寸为0
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: "powderblue"}}></View>
        <View style={{flex: 2, backgroundColor: "skyblue"}}></View>
        <View style={{flex: 3, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

运行结果：

运行结果.png

使用Flexbox布局

在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native中的Flexbox的工作原理和web上的CSS基本一致，也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

• Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

class LotsOfStyles extends Component {
  render() {
    return(
      // 父容器设定很重要，如果父容器没有设定width和height，也没有设定flex，则父容器的尺寸为0
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 1, backgroundColor: "powderblue"}}></View>
        <View style={{flex: 2, backgroundColor: "skyblue"}}></View>
        <View style={{flex: 3, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

运行结果：

运行结果.png

• Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={{flex: 1, flexDirection: "column", justifyContent: "center", alignItems: "center"}}>
        <View style={{width: 100, height: 100, backgroundColor: "powderblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

运行结果：

运行结果.png

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 100去掉之后，alignItems: 'stretch'才能生效。

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={{flex: 1, flexDirection: "column", justifyContent: "stretch", alignItems: "center"}}>
        <View style={{height: 100, backgroundColor: "powderblue"}}></View>
        <View style={{height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{height: 100, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

运行结果：

运行结果.png