React Native 学习笔记（五）-- 样式Style

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中的属性使用基本一致，

Part Four

资料

React Native 中文网 – 样式
W3CSchool