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组件参考以获取完整列表。
现在你可以让你的文字变得美丽。成为风格大师的下一步是学习如何控制组件的大小。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
