React Native 学习笔记十八(关于样式 补充)

来源:互联网 发布:c语言源文件名有那些 编辑:程序博客网 时间:2024/05/16 04:54

之前关于样式 我们之前说到了 单一样式的设置 以及根据条件选择样式 

今天将对前面的样式进行补充 

将样式的创建放在最后 是为了 只创建一次 并不是每次render都进行创建

样式覆盖

import React,{ Component } from 'react';import {    View,    Text,    StyleSheet}from 'react-native';export default class StyleDemo extends Component {    constructor(props){        super(props);        this.state={            active:true,        }    }    render() {        return (            //此时我们就知道为什么之前我们定义样式的时候 总是{}套[] 了 就是为了这个一系列样式的编译            //那么问题来了  如果属性有重复 大妹子 你说可咋整  来姐姐告诉你哈 以右边的为准 也就是属性覆盖            <View style={[styles.base,styles.container]}>                //根据上面我们讲的 我们就可以格局条件设置样式了 其实就是属性的覆盖                <Text style={[styles.base,this.state.active && styles.active]}> 你好啊! 小姑娘! 嘿嘿</Text>            </View>        );    }}var styles = StyleSheet.create({    container:{        backgroundColor:'#ffffff'    },    base: {        width: 380,        height: 38,    },    background: {        backgroundColor: '#00ff00',    },    active: {        borderWidth: 2,        borderColor: '#00ff00',        color:'#ff0000'    },});


0 0
原创粉丝点击