React Native - Style

有了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

現在,你可以讓你的文字很美。成為一名造型大師下一步就是要學會如何控制組件尺寸。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容