樣式

在 React Native 中，你並不需要學習什麼特殊的語法來定義樣式。我們仍然是使用 JavaScript 來寫樣式。所有的核心元件都接受名為style的屬性。這些樣式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的語法要求使用了駝峰命名法，例如將background-color改為backgroundColor。

style屬性可以是一個普通的 JavaScript 物件。這是最簡單的用法，因而在示例程式碼中很常見。你還可以傳入一個數組——在陣列中位置居後的樣式物件比居前的優先順序更高，這樣你可以間接實現樣式的繼承。

實際開發中元件的樣式會越來越複雜，我們建議使用StyleSheet.create

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <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({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
 

常見的做法是按順序宣告和使用style屬性，以借鑑 CSS 中的“層疊”做法（即後宣告的屬性會覆蓋先宣告的同名屬性）。

文字的樣式定義請參閱Text 元件的文件。