参考文档:http://facebook.github.io/react-native/docs/style.html
- style是一个props
- style的键值命名格式遵循CSS风格,除了名字使用驼峰法则而不是使用分隔符。例如背景色:
backgoundColor
,不是background-color
- 可以传递style数组,最后一个style有优先权,因而可以使用它继承styles
- 为了组件的扩展性,在一个作用域中使用
StyleSheet.create
定义多个style通常更加明晰。
实例如下:
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);