React-Native 样式设置

一、样式声明

1.内联样式：

一般情况下，内联样式简单粗暴，让你可以快速的调试，但内敛样式比较低效，一般情况下应该避免使用

<Text style = {{fontSize:20,fontStyle:'normal',fontWeight:'bold'}}>和乐乐了哦</Text>

2.对象样式：

对比内联样式的语法，是将内联样式分离出来，避免每一次render方法时都进行创建样式

 const italic = {fontSize:20, fontStyle:'italic',fontWeight:'bold'};
 <Text style = {italic}>我是对象样式</Text>

3.使用StyleSheet.create：

StyleSheet.create创建的样式，可以减少内存分配数，从而提高性能，StyleSheet是不可变的，通常能够带来一些遍历，

StyleSheet还能帮你检查样式语法是否合理。所以它是一个不错的样式选择

const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
<Text style ={styles.font}>我是StyleSheet.create创建的样式</Text>

4.样式拼接：

一个组件对多个样式的复用，就可以使用样式拼接，样式拼接是结合样式的一种实用的方法

    const styles = StyleSheet.create({font:            {fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
    <Text style = {[styles.content,styles.font]}>我是组合样式一</Text>
    <Text style = {[styles.content,styles.font,{color:'#666666'}]}>我是组合样式二</Text>

5.条件样式：

根据渲染逻辑对组件进行样式设置

    constructor(props){
        super(props);

        this.state = {
            toucher:false,
        }

    }
    使用如下
    const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
    <Text style = {this.state.toucher && styles.font}>我是条件样式</Text>

6.导出样式对象

随着样式变得越来越复杂，我们将样式从组件JavaScript代码中分离出来，通过组件来划分目录，是代码开发管理容易

    import {StyleSheet} from 'react-native';
    const styles = StyleSheet.create({
        text:{
            fontSize:18,
            color:'#ff00ff',
        },
        bold:{
            fontWeight:'bold'
        }
    });
    export default styles;  

    /导入样式对象，并使用
    import exStyles from '../comment_style/styles';
    <Text style ={[exStyles.text,exStyles.bold]}>我是导出样式</Text>
    

7.使用父类样式

使用组件样式进行传递，从而更有效的被父组件控制流程和操作样式。

    class UserStyle extends Component{
        render(){
            return(
                <View>
                    <Text style = {this.props.style}>我是父类的属性样式,并且使用了导出样式</Text>
                </View>
            );
        }
    }
    //使用
    <UserStyle style = {[exStyles.text,exStyles.bold]}></UserStyle>

8.复用和样式共享：

就是将项目组件和样式分包管理，大概组织成如下样式：

    - js
        |- components
            |- Button
                |- index.js
                |- styles.js
        |- styles
            |- styles.js
            |- colors.js
            |- fonts.js

二、学习使用完整案例

import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image

} from 'react-native';

import exStyles from '../comment_style/styles';

const italic = {fontSize:20, fontStyle:'italic',fontWeight:'bold'};

const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});

export default class InStyles extends Component{

    constructor(props){
        super(props);

        this.state = {
            toucher:false,
        }

    }

    render(){
        
        return (

            <View>
                <Text style = {{fontSize:20,fontStyle:'normal',fontWeight:'bold'}}>我是内敛样式</Text>

                <Text style = {italic}>我是对象样式</Text>

                <Text style ={styles.font}>我是StyleSheet.create创建的样式</Text>
                
                <Text style = {[styles.content,styles.font]}>我是组合样式一</Text>
                
                <Text style = {[styles.content,styles.font,{color:'#666666'}]}>我是组合样式二</Text> 

                <Text style = {this.state.toucher && styles.font}>我是条件样式</Text>
                
                <Text style ={[exStyles.text,exStyles.bold]}>我是导出样式</Text>

                <UserStyle style = {[exStyles.text,exStyles.bold]}></UserStyle>
            </View>

        );

    }

}

class UserStyle extends Component{

    render(){
        return(
            <View>
                <Text style = {this.props.style}>我是父类的属性样式,并且使用了导出样式</Text>
            </View>
        );
    }

}