在 React Native 中,你并不需要學習什么特殊的語法來定義樣式。我們仍然是使用 JavaScript 來寫樣式。所有的 核心組件 都接受名為 style 的屬性。這些 樣式名 基本上是遵循了 web 上的 CSS 的命名,只是按照 JS 的語法要求使用了駝峰命名法,例如將 background-color 改為backgroundColor。
style 屬性可以是一個普通的 JavaScript 對象。這是最簡單的用法,因而在示例代碼中很常見。你還可以傳入一個數組 —— 在數組中位置居后的樣式對象比居前的優(yōu)先級更高,這樣你可以間接實現樣式的繼承。
實際開發(fā)中組件的樣式會越來越復雜,我們建議使用 StyleSheet.create [ ?i?t ] 來集中定義組件的樣式。比如像下面這樣:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class MyApp 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',
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
常見的做法是按順序聲明和使用 style 屬性,以借鑒CSS中的“層疊”做法(即后聲明的屬性會覆蓋先聲明的同名屬性)。