有了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。
现在,你可以让你的文字很美。成为一名造型大师下一步就是要学会如何控制组件尺寸。