React Native之StyleSheet样式表
时间:2022-04-24
本文章向大家介绍React Native之StyleSheet样式表,主要内容包括概述、StyleSheet样式表的优点、StyleSheet使用、属性、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
概述
在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在View中引用样式。
var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
view中引用:
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
StyleSheet样式表的优点
采用StyleSheet样式表的优点注意如下: 从代码质量角度来分析:
- 从render渲染方法中移除了styles样式相关代码,这样可以使代码更加容易阅读
- 通过对不同样式命名,正好也是对render方法中的组件的一种标志
- 这样的写法做到了业务和样式的分离,为后面分层开发打下了基础
从性能角度来分析:
- 通过StyleSheet,我们可以通过标志的样式ID来引用,而不是每次都要创建一个新的Style对象
- 该允许样式通过桥接在原生代码和JavaScript中传递一次,后面全部通过该id进行引用(不过现在该功能还没有实现)
StyleSheet使用
调用方法:
create(obj:{[key:string]:any}) static 静态方法 通过给定的对象进行常见一个StyleSheet样式
属性
- .hairlineWidth:CallExpression
{
borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth
}
2. flatten: CallExpression 使用异常。
var styles = StyleSheet.create({
listItem: {
flex: 1, fontSize: 16, color: 'white' }, selectedListItem: { color: 'green' } });
StyleSheet.flatten([styles.listItem, styles.selectedListItem])
// returns { flex: 1, fontSize: 16, color: 'green' }
- Web Service初探
- async & await 的前世今生(Updated)
- MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN
- Spring @Transactional踩坑记
- jvm运行时环境属性一览
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
- C#集合类型大盘点
- 将spring源码导入到eclipse中
- 将struts源码导入eclipse
- 初探领域驱动设计(1)为复杂业务而生
- 最大公约数的算法
- 是时候开始用C#快速开发移动应用了
- Open ID Connect(OIDC)在 ASP.NET Core中的应用
- Jetty入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (四十一)golang--goroutine
- (四十二)golang--协程之间通信的方式
- (四十三)golang--管道
- 绕过磊科路由器登录密码
- JeeSite | 数据权限应用
- 数据防泄漏 | 禁止PrintScreen键
- LeetCode | 实现strStr()
- LeetCode | 机器人能否返回原点
- LeetCode | 2 的幂
- JeeSite | Excel 导入导出
- 贪心法--哈夫曼编码
- 基于maven+ssm的增删改查之使用mybatis逆向工程生成相关文件
- Arrays 的二分查找
- (四十四)golang--协程(goroutine)和管道(channel)相结合实例
- 基于maven+ssm的增删改查之测试相关ssm环境是否成功