React Native：樣式

React Native 并沒有使用 CSS ，而是依賴于JavaScript 編寫的腳本來美化您的程序。這曾經是一個很有爭議的決定，您可以通過讀這篇文章的內容了解使用這種方式的理由。

聲明樣式

React Native 是使用下面的代碼形式來聲明樣式：

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

StyleSheet.Create 構造器是可選的，但使用他可以有一些很好的優勢。 他可以確保那些變量值傳遞內部引用的表格內，變成普通的數字時，該值不會變化，同時也是不透明的。把該構造器放在文件的尾部，您也可以確保該樣式只會在應用程序里被加載一次，而不會在每個潤色器中都被加載。

所以的屬性名字和值都是那些可用有web頁面的元素的子集。 而頁面布局，  React Native 采用的是 Flexbox.

使用樣式

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

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

他們也同樣接受樣式屬性數組：

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

這里的行為就和 Object.assign 是一樣的：為了避免賦值沖突，同樣的元素值位于最右的那一個將會有優先權，并且所有錯誤的值，包括寫錯的，未定義的以及空值都會被忽略。常用的樣式范式是一個帶條件判斷的，會依據不同的條件展示不同的樣式。

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

最后，如果你在逼不得已的情況下，也可以直接在潤色器里面直接創建樣式對象。但這方式我強烈不推薦。把所有的樣式代碼都放在定義好的數組中。

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

傳遞樣式

為了讓調用點可以定制子模塊的樣式，您可以把樣式表傳遞過去。使用 View.propTypes.style 和 Text.propTypes.style 目的是為了只讓樣式參數被傳遞：

var List = React.createClass({
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  },
  render: function() {
    return ({elements.map((element) =>
          
        )});
  }
});
// ... in another file ...

支持的性能

您可以在下面的列接里找到更多支持的CSS 的特性：

• View Properties
• Image Properties
• Text Properties
• Flex Properties
• Transform Properties

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達
• 2015-10-27
• 1497
• 公司新聞，網站開發，網站設計，UI