樣式

React Native 不實(shí)現(xiàn) CSS，而是依賴于 JavaScript 來(lái)為你的應(yīng)用程序設(shè)置樣式。這是一個(gè)有爭(zhēng)議的決定，你可以閱讀那些幻燈片，了解背后的基本原理。

聲明樣式

在 React Native 中聲明樣式的方法如下：

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
}); 

StyleSheet.create 的創(chuàng)建是可選的，但提供了一些關(guān)鍵優(yōu)勢(shì)。它通過(guò)將它們轉(zhuǎn)換為引用一個(gè)內(nèi)部表的純數(shù)字，來(lái)確保值是不可變的和不透明的。通過(guò)將它放在文件的最后，也確保了它們?yōu)閼?yīng)用程序只創(chuàng)建一次，而不是每一個(gè) render 都創(chuàng)建。

所有的屬性名稱和值是工作在網(wǎng)絡(luò)中的一個(gè)子集。對(duì)于布局來(lái)說(shuō)，React Native實(shí)現(xiàn)了 Flexbox。

使用樣式

所有的核心組件接受樣式屬性。

<Text style={styles.base} />
<View style={styles.background} />

它們也接受一系列的樣式。

<View style={[styles.base, styles.background]} />

行為與 Object.assign 相同：在沖突值的情況下，從最右邊元素的值將會(huì)優(yōu)先，并且 falsy 值如 false，undefined 和 null 將被忽略。一個(gè)常見(jiàn)的模式是基于某些條件有條件地添加一個(gè)樣式。

<View style={[styles.base, this.state.active && styles.active]} /> 

最后，如果真的需要，您還可以在render中創(chuàng)建樣式對(duì)象，但是這種做法非常不贊成。最后把它們放在數(shù)組定義中。

<View
  style={[styles.base, {
    width: this.state.width,
    height: this.state.width * this.state.aspectRatio
  }]}
/>

樣式傳遞

為了讓一個(gè) call site 定制你的子組件的樣式，你可以通過(guò)樣式傳遞。使用 View.propTypes.style 和 Text.propTypes.style，以確保只有樣式被傳遞了。

var List = React.createClass({
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  },
  render: function() {
    return (
      <View style={this.props.style}>
        {elements.map((element) =>
          <View style={[styles.element, this.props.elementStyle]} />
        )}
      </View>
    );
  }
});
// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />

屬性支持

你可以在以下的鏈接中檢測(cè)最新的 CSS 屬性支持。

• View 屬性
• Image 屬性
• Text 屬性
• Flex 屬性