React-Native 基础（四）使用style定义组件的样式

参考文档：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);