React Native之StyleSheet样式表

时间:2022-04-27
本文章向大家介绍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样式

属性

  1. .hairlineWidth:CallExpression 该用来定义当前平台最细的宽度。该属性用来设置边框或者两个组件之间的分割线。例如:
{
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth
  }
  1. 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' }