RN之样式

在React Native中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式基本上是遵循了web上的CSS的命名，只是按照js的语法要求使用了驼峰命名法，例如将background-color改为backgroundcolor。
style属性可以是一个普通的JavaScript对象。这是最简单的用法，因而在示例代码中很常见。还可以传入一个数组——在数组中位置居后的样式比居前的优先级更高，这样你可以间接实现样式的继承。
实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来击中定义组件的样式。比如像下面这样的：

import React, { Component } from 'react';
import { StyleSheet,Text, View } from 'react-native';
export default 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,style.red]}>bigBlue,then red</Text>
        <Text style={[styles.red,style.bigBlue]}>red,then bigBlue</Text>
        </View>
        );
    }
}

const styles=StyleSheet.create({//集中定义组件
    bigBlue:{
        color:'blue',
        fontWeight:'bold',
        fontSize:30,
    },
    red:{
        color:'red',
    },
});

运行结果如图

常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。

现在我们已经了解了如何调整文本样式，下面我们要学习的是如何控制组件的尺寸。