React Native中StyleSheet.create工作原理及<+运算符作用解析

一、create 方法工作流程 #

对应源码如下：

create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
  // 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) {
      if (obj[key]) {
        Object.freeze(obj[key]);
      }
    }
  }
  return obj;
}

具体执行逻辑如下：

• 类型校验阶段：该方法是Flow类型标注的泛型方法，要求入参obj必须符合RN内部定义的样式规范类型____Styles_Internal的约束，返回值标注为入参对象的只读版本。
• 开发环境特殊处理：当运行在开发环境（__DEV__为true）时，会遍历入参样式对象的所有属性，调用Object.freeze冻结每个样式值，防止后续业务代码意外修改样式对象，减少调试成本。
• 生产环境逻辑：生产环境下会跳过开发环境的冻结逻辑，直接原样返回传入的样式对象。
  注：代码中的TODO是RN的历史遗留说明：早期版本的StyleSheet.create会返回映射后的数字ID做性能优化，新版本已经改为直接返回样式对象，目前还在迁移旧调用的阶段，所以返回值暂时标注为只读类型，后续迁移完成后会调整返回类型定义。

二、<+ 语法的作用 #

这里不存在单独的<+运算符，是两个独立的Flow语法元素连写的视觉效果：

• < 是泛型定义的左边界符号，用来标识后续内容是泛型参数的定义
• + 是Flow类型系统中泛型协变的修饰符，标记在泛型参数前表示该泛型是协变类型

协变的作用是放宽类型校验规则：如果类型T是约束类型____Styles_Internal的子类型，那么传入T类型的样式对象也可以通过类型校验，不需要和____Styles_Internal的定义完全匹配，兼顾了类型安全和样式定义的灵活性。

内容的提问来源于stack exchange，提问作者chackerian