使用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”级联。
