有了React Native,你不需要使用某個特殊的語言或語法來定義樣式,你只使用JavaScript來設計你的app。所有的核心組件都接收名為style的prop。style的names和values通常和web端的CSS相對應,除了names的某些像backgroundColor而不是background-color。
style prop可以是一個普通的舊的JavaScript對象。這是最簡單的我們平時使用它來寫示例代碼。你也可以傳一個樣式的數組 - 數組中的最后一個樣式有優先權,這樣你就可以用它來繼承樣式。
隨著組件復雜性的增加,使用StyleSheet.create在一個地方定義多個樣式是組件更加簡潔。下面是一個例子:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles 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('LotsOfStyles', () => LotsOfStyles);
一個常見的模式是讓您的組件接受輪流用于style 子組件的style prop。您可以用這個做styles的“級聯”就像CSS的級聯方式。
有很多更多的方式來定義text style。檢查完整列表Text component reference。
現在,你可以讓你的文字很美。成為一名造型大師下一步就是要學會如何控制組件尺寸。