在 React Native 中，StyleSheet 组件是实现了类似 Web 中 CSS 样式表的功能。简单的创建一个StyleSheet 文件的实例代码如下:
创建一个样式表：

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

使用一个样式表：

<View style={styles.container}>
  <Text style={styles.title} />
</View>

这样写的优点：

  1. 从代码质量角度来分析:
  • 从 render 函数中移除具体的样式内容，可以使代码更清晰易懂。
  • 给样式命名也可以对 render 函数中的组件增加语义化的描述。
  1. 从性能角度来分析:
  • 通过 StyleSheet，我们可以通过标志的样式 ID 来引用，而不是每次都要创建一个新的 Style 对象
  • 该允许样式通过桥接在原生代码和 JavaScript 中传递一次，后面全部通过该 id 进行引用(不过现在该功能还没有实现)

方法

static create(obj)
静态方法 通过给定的对象进行常见一个 StyleSheet 样式

常量

1.hairlineWidth:CallExpression 该用来定义当前平台最细的宽度。该属性用来设置边框或者两个组件之间的分割线。例如:

var styles = StyleSheet.create({
  separator: {
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

该会根据当前平台信息，自动转换成一根很细的线。