React Native 中 StyleSheet.create 的用途

Question

我想问社区关于 React Native 中 StyleSheet.create 的变化。

前：

我已经回顾了过去关于这个主题的问题，比如这个问题，但它们都在很久以前得到了回答（除了这个答案，但我想有一些明确的东西），而且从那以后发生了很多变化。

在 StyleSheet 为样式创建唯一 id 之前，主要用于性能优化。如果您想从创建的样式对象中获取样式，您应该使用flatten方法。大多数答案都引用了这个 flatten 方法，您无法像访问普通对象一样访问样式属性。

例如

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

您无法访问填充样式，例如styles.modalContainer.padding;

目前：

然而，这种行为已经改变。这是React Native 团队的 StyleSheet 源代码。只需复制 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() 方法创建全局样式表，以全局使用并减少您的头痛。

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

虽然 Stylesheet.create() 将充当所有使用它来设置自身样式的视图的单个全局对象，从而实现性能/内存优化。