React Native - 04 - 样式

使用React Native，您不需要使用特殊的语言或语法来定义样式。您只需使用JavaScript设计您的应用程序。所有的核心组件都接受一个名为style的对象。样式名称和值通常与CSS在网络上的工作方式相匹配，除了名称是使用驼峰命令规则来编写的，例如backgroundColor而不是background-color。

样式可以是一个普通的旧JavaScript对象。这是最简单的，我们通常使用例如代码。您还可以传递一组样式 - 数组中的最后一个样式具有优先级，因此您可以使用它来继承样式。

随着组件的复杂性增长，使用StyleSheet.create在一个地方定义多个样式通常更为清晰。这是一个例子：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
    render() {
        return (
            <View>
                <Text style={ styles.red }>Just Red</Text>
                <Text style={ styles.bigbule }>Just bigblue</Text>
                <Text style={[ styles.bigbule, styles.red ]}>bigblue, then red</Text>
                <Text style={[ styles.red, styles.bigbule ]}>red, then bigblue</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bigbule: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },
    red: {
        color: 'red',
    },
});

image.png

一个常见的模式是让你的组件接受一个样式对象，而这个样式对象反过来又被用来设计子组件的样式。您可以使用它来使样式“CSS”级联。