StyleSheet.create函数的目的是在React Native中创建样式表。

19 浏览
0 Comments

StyleSheet.create函数的目的是在React Native中创建样式表。

我正在阅读《React Native 文档/教程》并想知道 StyleSheet.create 函数的作用是什么。

例如，教程中给出了以下代码：

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

但我不明白这与以下代码有何不同：

const styles = {
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
};

0

3 答案

0 Comments

StyleSheet.create方法是React Native中用于创建样式表的一个API。它的作用是将传入的样式对象进行验证，并将其中的每个键值对注册到React。具体来说，它会遍历样式对象的每个属性，通过调用StyleSheetValidation.validateStyle方法对属性进行验证，然后通过调用ReactNativePropRegistry.register方法将属性值注册到React。最后，它会返回一个包含注册后的样式对象的结果。

通过查看源码，我们可以看到create方法的实现。首先，它创建一个空的result对象，并通过类型断言将其指定为一个泛型T的对象。然后，它通过for循环遍历传入的样式对象的每个属性。在循环中，它会调用StyleSheetValidation.validateStyle方法对属性进行验证，确保属性的合法性。接着，它会调用ReactNativePropRegistry.register方法将属性值注册到React，并将结果保存到result对象的对应属性中。最后，它返回这个result对象。

根据ethanneff的回答，我们可以看到在较新的版本中，create方法的实现发生了变化。现在，它似乎只是简单地返回传入的样式对象本身，不再进行验证和注册的过程。

StyleSheet.create方法的出现是为了方便开发者创建样式表，并确保样式的合法性。它通过验证和注册的过程，将样式对象中的每个属性注册到React中，以便在组件中使用。而在较新的版本中，create方法则只是简单地返回传入的样式对象本身，省略了验证和注册的过程。

参考链接：

- create方法源码：[https://github.com/facebook/react-native/blob/0.31-stable/Libraries/StyleSheet/StyleSheet.js](https://github.com/facebook/react-native/blob/0.31-stable/Libraries/StyleSheet/StyleSheet.js)

- create方法新版本源码：[https://github.com/facebook/react-native/blob/0.57-stable/Libraries/StyleSheet/StyleSheet.js#L373](https://github.com/facebook/react-native/blob/0.57-stable/Libraries/StyleSheet/StyleSheet.js#L373)

0
0 Comments

"StyleSheet.create"是React Native中的一个方法，它的作用是创建一个样式表。为什么要使用StyleSheet.create呢？下面的内容会解答这个问题，并提供一些相关的解决方法。

首先，使用StyleSheet.create可以对样式进行验证。这是因为React Native会在开发环境中对样式进行验证，如果样式存在错误，控制台会在编译时抛出错误，而不是在运行时。这样可以帮助我们在开发阶段快速发现并修复样式错误。

其次，根据React Native的官方文档，使用StyleSheet.create可以通过ID引用样式，而不是每次都创建一个新的样式对象。这样可以避免重复创建样式对象，提高性能。

另外，使用StyleSheet.create还可以减少通过桥传输数据的次数。在React Native中，将数据通过桥传输是一项非常耗费性能的操作。通过使用StyleSheet.create，我们可以减少桥的负担，提高应用程序的性能。

需要注意的是，文档中提到的“只发送样式一次，以后都通过ID引用”的功能在当前版本的React Native中还没有完全实现。然而，使用StyleSheet.create仍然可以减少对桥的负荷，提高性能。

另外，在开发过程中，我们可以使用StyleSheet.flatten将样式表转换为对象，以便进行检查和记录。

使用StyleSheet.create在React Native中是值得推荐的。它可以验证样式、提高性能，并减少对桥的负荷。如果你对性能有疑虑，可以通过编写一个测试页面来进行性能测试，并使用StyleSheet.create和不使用的情况进行比较。

0
0 Comments

问题：为什么要使用StyleSheet.create？

原因：

根据GitHub上的评论，使用StyleSheet.create不再带来性能上的提升。一位用户通过代码证明了这一点，他比较了使用StyleSheet.create和直接定义样式对象的性能差异。结果显示，两者的性能几乎相同，甚至有些情况下直接定义样式对象的性能更高。用户查看了React Native的源码，发现最新版本的StyleSheet.create实际上就是将样式对象提取到了一个变量中。

解决方法：

根据用户的观察和分析，可以直接将样式对象定义为一个变量，而不使用StyleSheet.create。这样可以避免使用StyleSheet.create带来的一些性能损失。

从用户的实际测试和源码分析来看，使用StyleSheet.create在当前版本的React Native中已经没有性能上的提升了。因此，可以考虑直接将样式对象定义为一个变量来使用，以避免不必要的性能损失。

0