Question

我想向社区询问React Native中StyleSheet.create中的更改。

之前：

我已经回顾了有关该主题的以往问题，例如this question，但是很早以前就已经回答了所有问题（除了this answer之外，但我想确定一点）此后发生了很多变化。

在StyleSheet为样式创建唯一的ID之前，主要是为了优化性能。如果要从创建的样式对象中获取样式，则应使用flatten方法。大多数答案都引用了这种扁平化方法，因此您无法像对待普通对象一样访问styles属性。

例如

const styles = StyleSheet.create({
  modalContainer: {
    width: 100,
    backgroundColor: 'white',
    padding: 5,
  },

您可以不能访问填充样式，例如styles.modalContainer.padding;

当前：

但是，此行为已更改。 This is the source code of StyleSheet来自React Native团队。只需复制create方法：

create<+S: ____Styles_Internal>(obj: S): $ObjMap<S, (Object) => any> {
    // TODO: This should return S as the return type. But first,
    // we need to codemod all the callsites that are typing this
    // return value as a number (even though it was opaque).
    if (__DEV__) {
      for (const key in obj) {
        StyleSheetValidation.validateStyle(key, obj);
        if (obj[key]) {
          Object.freeze(obj[key]);
        }
      }
    }
    return obj;
  },
};

这只是返回传递给create的对象，对此没有做任何事情。因此，您可以实际以styles.modalContainer.padding;

的方式访问样式

也许我不太清楚TODO，但是至少从RN 0.57起，就已经以这种方式对这种方法进行了编码，而且我不知道他们是否打算将其改回原样。

我的问题：

再使用StyleSheet.create是否有意义？

提前感谢您的意见！

Answer 1

样式表通常用于在react native中创建全局样式并将其添加到需要对对象进行样式设置的各个视图中。

诸如TextInput，Text，Button之类的某些小部件无法在react native中应用几乎所有的CSS样式。

因此，在这些情况下，您可以使用这些小部件进行包装，然后使用StyleSheet.create（）方法创建全局StyleSheets，以全局使用并减轻您的头痛。

因此，对于您问题的结论可以总结为Stylesheet.create（）有助于提高性能，同时使用相同样式对多个视图进行样式设置将每次为每个视图创建一个新对象。

Stylesheet.create（）将用作所有视图的单个全局对象，所有视图都使用它来设置自身的样式，从而优化性能/内存。

Answer 2

StyleSheet是类似于CSS StyleSheets的抽象。不用每次都创建一个新的样式对象，StyleSheet可以帮助创建具有ID的样式对象，该ID还可以用来引用而不是再次渲染它。将代码移到render（）之外有助于更好地理解代码，并为低级组件增加含义。与render（）中的普通样式对象不同，样式表仅在桥上发送一次。

Answer 3

我从未听说过像您描述的那样flatten()是必要的。实际上，在第一次提交的React Native存储库中，提供了一个示例：

示例/电影/MovieCell.js：

https://github.com/facebook/react-native/commit/a15603d8f1ecdd673d80be318293cee53eb4475d#diff-4712aeb2165b3c0ce812bef903be3464

在此示例中，您可以看到var styles = StyleSheet.create({..});以其当前风格使用，而在2016年的这一时刻，您可以看到组件中引用的样式为styles.styleName。

另外，在StyleSheet类中，这里是create来自首次提交：

class StyleSheet {
   static create(obj) {
     var result = {};
     for (var key in obj) {
       StyleSheet.validateStyle(key, obj);
       result[key] = StyleSheetRegistry.registerStyle(obj[key]);
     }
     return result;
   }
// ...
}

如您所见，无论是在flatten方法内部，还是在使用create的用户中，都没有在初始提交时调用create。

总而言之，这似乎从未改变，您始终可以使用点运算符来访问样式。

关于是否使用它，我认为您别无选择。很明显，它内部包含某种验证代码，它也在使用类型检查，而React团队建议使用它。我看不到有其他方法可以做到这一点。您如何仅使用某种init或构造函数方法而无需create即可使用该类？我在班上没看到一个。没有StyleSheet({...});要返回obj，您需要致电create。

如果您取消验证行为并将其变成简单的对象，则您的编辑器将无法为您提供IntelliSense。您将不知道何时输入错字或引用不存在的样式，就不会自动补全。您需要创建自己的界面并使用TypeScript。因此，您应该使用create，因为否则至少会破坏您的IDE。

React Native中StyleSheet.create的目的

3 个答案: