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。

现在，你可以让你的文字很美。成为一名造型大师下一步就是要学会如何控制组件尺寸。