样式style简介

React Native中的每个组件都有一个style的属性，我们可以通过style属性来设置组件的样式。例如，下面的代码中，通过设置Text组件的样式来设置显示文字的颜色为蓝色。

<Text style={{color: 'blue'}}>{display}</Text>

React Native中的样式名基本遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。一般来说，组件支持的样式大概有几十种，常用的样式可以参考下面的表格。

| 样式名 | 值 | 备注 |
| --- | --- | --- |
|fontSize|数值|文字字体大小|
| backfaceVisibility | enum('visible', 'hidden') | 设置组件背面是否可见。 |
| backgroundColor | string | 属性设置元素的背景颜色。 |
| borderColor | string | 属性设置四条边框的颜色。|
| borderRadius | number | 设置边框的圆角。 |
| borderStyle | enum('solid', 'dotted', 'dashed') | 设置边框的样式。 |
| borderWidth | number | 设置边框设置宽度。 |
| shadowColor | color | 设置阴影色 |
| opacity | number | 设置组件的不透明度。 |
| overflow | enum('visible', 'hidden') | 设置超出组件的部分是显示，还是隐藏。 |

我们可以自己尝试这些样式是如何控制组件显示的，例如在下方的代码中，我们为Text组件定制了其fontSize、backgroundColor、color、borderColor、borderWidth、borderRadius、opacity样式属性。

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
      <Text style={{fontSize:30,backgroundColor: 'yellow', color: 'red', borderColor: 'blue', borderWidth: 4, borderRadius: 4, opacity: 0.5,}}> www.99ios.com </Text>
      </View>
    );
  }
}

程序运行后，我们可以看到显示的Text组件样式已经进行了更新。

StyleSheet模块

在React Native中，StyleSheet模块实现了类似Web中CSS样式表的功能，通过StyleSheet.create可以集中定义组件的样式。在代码中需要使用样式的地方，只需要直接获取不同的styles中的变量即可。接下来，我们定义三种样式：

1. container：用来设置容器的布局、背景等样式；
2. redText：设置字体颜色为红色，字号为30；
3. yellowBackground：设置背景为黄色。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  redText: {
      color: 'red',
      fontSize: 30
  },
  yellowBackground: {
      backgroundColor: 'yellow'
  },
});

样式定义完成后，我们可以在AwesomeProject组件中，使用已经定义的样式。

export default class AwesomeProject extends Component {
  render() {
    return (
        <View style={styles.container}>
          <Text style={[styles.redText, styles.yellowBackground]}>  www.99ios.com </Text>
        </View>
    );
  }
}

运行程序后，可以看到Text组件已经使用了预设的样式。

在实际的开发过程中，推荐使用这种方式来管理组件的样式。这样实现方式有如下几个优点：

• 便于修改样式，只需要在StyleSheet模块中修改样式，所有应用这个样式的组件都会同步更新样式。
• 能有效统一组件的样式，使整个应用的风格统一。

---