Style

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

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

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

import React, { Component } from 'react';
import { AppRegistry, 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.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',
  },
});

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);

一种常见的模式是让你的组件接受一个style道具，而道具又用于设计子组件的样式。您可以使用它来使样式在CSS中以“级联”方式进行。

有很多方法可以自定义文本样式。查看Text组件参考以获取完整列表。

现在你可以让你的文字变得美丽。成为风格大师的下一步是学习如何控制组件的大小。