樣式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.mlyel.cn </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.mlyel.cn </Text>
        </View>
    );
  }
}

運行程序后，可以看到Text組件已經使用了預設的樣式。

在實際的開發過程中，推薦使用這種方式來管理組件的樣式。這樣實現方式有如下幾個優點：

• 便于修改樣式，只需要在StyleSheet模塊中修改樣式，所有應用這個樣式的組件都會同步更新樣式。
• 能有效統一組件的樣式，使整個應用的風格統一。

---