在 React Native 中，你并不需要學(xué)習(xí)什么特殊的語(yǔ)法來(lái)定義樣式芦缰。我們?nèi)匀皇鞘褂?JavaScript 來(lái)寫樣式。所有的 核心組件 都接受名為 style 的屬性。這些 樣式名 基本上是遵循了 web 上的 CSS 的命名领炫，只是按照 JS 的語(yǔ)法要求使用了駝峰命名法，例如將 background-color 改為backgroundColor张咳。
style 屬性可以是一個(gè)普通的 JavaScript 對(duì)象帝洪。這是最簡(jiǎn)單的用法，因而在示例代碼中很常見脚猾。你還可以傳入一個(gè)數(shù)組 —— 在數(shù)組中位置居后的樣式對(duì)象比居前的優(yōu)先級(jí)更高葱峡，這樣你可以間接實(shí)現(xiàn)樣式的繼承。
實(shí)際開發(fā)中組件的樣式會(huì)越來(lái)越復(fù)雜龙助，我們建議使用 StyleSheet.create [ ?i?t ] 來(lái)集中定義組件的樣式砰奕。比如像下面這樣：
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中的“層疊”做法（即后聲明的屬性會(huì)覆蓋先聲明的同名屬性）。
