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
- React Native 学习笔记十八(关于样式 补充)
- React Native 学习笔记五(关于样式的使用)
- React Native 学习笔记(五)-- 样式Style
- React-Native学习十八:Navigator
- React Native 学习笔记四(关于state的使用)
- React Native 学习笔记七(关于布局的使用)
- React Native 学习笔记十九(关于开发环境)
- react native 学习笔记之指定样式,宽,高
- react native 学习笔记之指定样式,宽,高
- React-Native 学习笔记
- react native学习笔记
- react-native 学习笔记
- 学习笔记 - React Native
- React Native 学习笔记
- React Native 学习笔记
- react-native 学习笔记
- React Native学习笔记
- React Native学习笔记
- UGUI--背包系统之一-------InventoryManager
- 查询 数据平均值 和重复记录
- JavaScript中的函数参数详解
- apex:actionRegion
- Android OkHttp(三)源码解析
- React Native 学习笔记十八(关于样式 补充)
- Unity 3D涂色
- 深度学习中的数学与技巧(11):dropout原理解读
- 如何通过JS调用某段SQL语句
- python(十一)上:RabbitMQ 使用详细介绍
- liinx下 安装phpstudy
- pthon--字符串拼接
- 初级dba阅读书籍
- hibernate分页查询