RN入门基础4：样式

一、介绍

前面介绍RN时，已经提到了，RN的基本代码分为四部分，分别是组件导入区、核心代码区、组件样式区、注册启动组件。这里讲介绍组件样式区。

在React Native中，仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。也可以传入一个数组——在数组中位置居后的样式比居前的样式优先级更高，这样你可以间接实现样式的继承。

实际开发中建议使用StyleSheet.create来集中定义组件的样式。

二、举例

1.定义几个文本

（1）先导入组件

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

（2）其次在index.xml中定义需要的样式，蓝色大字体，红色正常字体

//使用StyleSheet.create来集中定义组件的样式
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

（3）最后在核心代码中实例化四个Text，并注册

export default class myprojectname extends Component{
    render(){
        return(
            <View>
                {
                    //style属性可以是一个普通的JavaScript对象。
                    //还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
                    //后声明的属性会覆盖先声明的同名属性
                }
                <Text style={ styles.red }>just red222</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>
        );
    }
}
AppRegistry.registerComponent('myprojectname ', () => myprojectname );

（4）效果及解释

Text1:仅仅是红色字体

Text2：仅仅是蓝色大字体

Text3：在数组中，先是蓝色大字体，之后红色字体，由于在数组中后声明的属性会覆盖先声明的属性，所以最终是红色大字体

Text3：先变为红色字体，之后蓝色属性覆盖红色，最终成为蓝色大字体

RN入门基础4：样式

猜你喜欢