Part One
样式的命名规范
在React Native中所有的核心组件都是接受名为style 的属性。至于样式的命名也基本上遵循了CSS的命名,不同的是按照了JS的驼峰命名法来命名样式:
比如:在CSS中background-color 在RN中就是backgroundColor。
Part Two
样式的优先级
和CSS中的样式优先级别是一样的,后面的样式对象比前面的样式对象的优先级别要高。也就是说相同的样式子样式的优先级别比父样式的优先级别高。同一数组中的样式,居后的样式对象比居前的优先级别高。
Part Three
样式的定义和使用
React Native中建议使用StyleSheet.create来集中定义组件的样式。下面咱们来看一下定义的方式:
import React, {Component} from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class TestComponent extends Component {
render(){
return(
<View>
// 样式的引用方式如下
<Text style={styles.red}> just red</Text>
</View>
);
}
}
// 看了JavaScript基本教程的应该知道const 关键字的作用(在Java中就是final关键字的作用)
const styles = StyleSheet.create({
// 定义一个名为red的样式对象
red:{
color:'red', // 在样式对象的属性后面永远写上逗号
fontSize:30,
fontWeight:'bold',
}, // 一个样式对象定义结束,建议也永远写上逗号
blue:{
color:'blue',
fontSize:25,
fontWeight:'bold',
}, // 一个样式对象定义结束,建议也永远写上逗号
});
AppRegistry.registerComponent('TestComponent', () => TestComponent);
注:其他的样式属性和CSS中的属性使用基本一致,