React Native Style

標籤：

　　

　　React Native不實現CSS而是依賴JavaScript來設定你的應用的樣式，這是一個有爭議的決定，你可以閱讀這些投影片瞭解其背後的基本原理。

　　

　　申明樣式：

 1 var styles = StyleSheet.create({ 2   base: { 3     width: 38, 4     height: 38, 5   }, 6   background: { 7     backgroundColor: ‘#222222‘, 8   }, 9   active: {10     borderWidth: 2,11     borderColor: ‘#00ff00‘,12   },13 });

　　StyleSheet.create 建立是可選的但是它提供了一些關鍵優勢。 它通過轉變值為引用內部表的普通數字來保證值是不可變且不透明的。把它放在檔案的末尾, 你能確保它們只被建立一次並且不是每次都被渲染。

　　所有的這些屬性名稱和值都只是工作在網路中的一個子集。對於布局，React Native執行 Flexbox。

 

　　使用樣式：

　　所有的核心組件接受樣式屬性 <引用上面代碼建立的樣式屬性>

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

　　

　　它們也接受一組樣式 <注意用數組包起來>

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

　　

　　行為與Object.assign類似：以防值衝突，這最右邊元素的值將會優先而比如false、undefined和null等值將會被忽略。 通常的做法是在基於某些條件有條件的添加一些樣式。

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

 

　　最後，如果你真的需要，你可以在渲染中建立樣式對象，但是不推薦這麼做，最後把它們放到數組定義中。

1 <View2   style={[styles.base, {3     width: this.state.width,4     height: this.state.width * this.state.aspectRatio5   }]}6 />

 

　　樣式傳遞：

　　為了定製你的子組件的樣式，你可以通過樣式傳遞。使用View.propTypes.style 和 Text.propTypes.style確保僅僅樣式被傳遞。

 1 var List = React.createClass({ 2   propTypes: {                        ===> 保證僅傳遞樣式 3     style: View.propTypes.style,  4     elementStyle: View.propTypes.style,       5   }, 6   render: function() { 7     return ( 8       <View style={this.props.style}> 9         {elements.map((element) =>10           <View style={[styles.element, this.props.elementStyle]} />11         )}12       </View>13     );14   }15 });16 17 // ... in another file ...18 <List style={styles.list} elementStyle={styles.listElement} />  ===> 傳遞樣式到List

 

　　總的來說，樣式上面的文法不多，主要多看看View, Image, Text, Flexbox, Transform的樣式支援。

React Native Style