RN 新版本适配不迷路：0.73～0.77 API、类型、构建变更一次讲清
·
| 序号 | 标题 | 变更详情 | 变更来源版本 | 变更对开发者的影响 | 影响场景 | 参考文档 | |
|---|---|---|---|---|---|---|---|
| 1 | ScrollViewShadowNode的getContentOriginOffset增加入参：includeTransform | 对getContentOriginOffset增加入参，修复反转的flatlist无法滚动的问题 | 0.74.0-rc4 | 修复反转的flatlist无法滚动的问题. 对于开发者而言，如果自行对ScrollView进行适配并调用getContentOriginOffset，需要添加一个布尔值：includeTransform，判断是否考虑style中设置的transform | 开发态：自定义ScrollView组件代码是否能正常编译 运行态：反转后的flatlist能正常滑动 | https://github.com/facebook/react-native/pull/44822 | |
| 2 | TochableHighlight无法作为TouchableHighlight类引用 | 修正对于TouchableHighlight能作为TouchableHighlight进行useRef的引用，变为只能React.ElementRef或View引用 | 0.75.0 | TouchabelHighLigfht在使用ref进行引用的时候应该作为View被引用，但是却被作为TouchableHighlight引用。 TouchableHighlight无法再被作为值或者类型引用： 如下用法会有报错： tsx<br>import {TouchableHighlight} from 'react-native';<br>const ref = useRef<TouchableHighlight>();<br>// ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.<br>// Did you mean typeof TouchableHighlight?<br>推荐解决方案 使用内置的RN类型 React.ElementRefdiff<br>-const ref = useRef<TouchableHighlight>();<br>+const ref = useRef<React.ElementRef<typeof TouchableHighlight>>();<br>还可以用View作为类而不是TouchableHighlight diff<br>-const ref = useRef<TouchableHighlight>();<br>+const ref = useRef<View>();<br>TouchabelHighLigfht在使用ref进行引用的时候应该作为View被引用，但是却被作为TouchableHighlight引用。TouchableHighlight无法再被作为值或者类型引用： 如下用法会有报错： tsx<br>import {TouchableHighlight} from 'react-native';<br>const ref = useRef<TouchableHighlight>();<br>// ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.<br>// Did you mean typeof TouchableHighlight?<br>推荐解决方案 使用内置的RN类型 React.ElementRefdiff<br>-const ref = useRef<TouchableHighlight>();<br>+const ref = useRef<React.ElementRef<typeof TouchableHighlight>>();<br>还可以用View作为类而不是TouchableHighlight diff<br>-const ref = useRef<TouchableHighlight>();<br>+const ref = useRef<View>();<br> | 开发态&运行态： 在前端代码中对TouchableHighlight使用useRef的场景 | https://github.com/facebook/react-native/pull/44038 | |
| 3 | 对于NativeModule中使用codegen方法时的传入参数做出更加严格的入参检查 | 在NativeModule中，如果使用了一个codegen的方法定义为：someMethod(value?: number): void;实际使用时传入null：NativeModule.someMethod(null);在修改之前不会报错，在修改之后会有报错。 | 0.75.0 | 在涉及原生的TurboModule中，是否在不接受传入null的codegen函数中直接传入null值 | 开发态：需要对TurboModule中是否接受null值做补充 运行态：在不接受null值的函数中传入null会导致运行报错。 | https://github.com/facebook/react-native/commit/67b9628af588e8fc778d732fc387dbd48acf705e | |
| 4 | 重命名js错误处理方法类型 | C++侧JsErrorHandler::JsErrorHandlingFunc类型更名为JsErrorHandler::OnJsError | 0.75.0 | 原来在RNInstance等类中提供 JsErrorHandler::JsErrorHandlingFunc 类型回调函数的地方，需要改为 JsErrorHandler::OnJsError 类型 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/43985 | |
| 5 | ReactPrimitives中删除没用的include | 从ReactPrimitives.h中删除了 include folly/dynamic.h和memory | 0.75.0 | 可能导致include了ReactPrimitives.h的c++代码找不到 folly/dynamic 或 memory 中定义的函数，只要通过了编译就不存在这个问题。如果构建失败需要在失败的文件中include相应的定义 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/43806 | |
| 6 | 部分可见元素可以作为列表锚点 | 旧实现只有完全展示的元素才能作为列表锚点，变更后部分可见的元素就可以作为列表锚点 | 0.75.0 | 变更的目的是避免加载指示器等在列表中完全展示但位置/显隐状态不稳定的元素被选为锚点后导致列表展示不稳定。建议开发者测试列表加载新元素场景，确认列表行为仍符合预期。 | 开发态：不影响 运行态：列表加载新元素 | https://github.com/facebook/react-native/pull/43203 | |
| 7 | SyncCallback禁止拷贝 | SyncCallback禁止拷贝，新增了允许move | 0.75.0 | 复制 SyncCallback 对象的代码无法通过编译，如果只需要一个callback对象可以改为move，如果需要多个callback需要创建多个。注意 SyncCallback 只能在独占js引擎上下文时执行 | 开发态：编译失败 运行态：错误的可能导致崩溃 | https://github.com/facebook/react-native/pull/43268 | |
| 8 | 组件onLayout事件优先级降低 | 将组件onLayout时间的优先级由可配置异步批量/异步不批量改为固定异步批量 | 0.74.0 | onLayout事件及时性变差，依赖这一回调进行动画或布局调整的场景，动作的时机可能受到影响。此外应注意onLayout和临近生命周期函数，如componentDidUpdate ，间的执行顺序。 | 开发态：无影响 运行态：影响onLayout的及时性及其与临近生命周期函数的执行顺序 | https://github.com/facebook/react-native/pull/42631 | |
| 9 | Animation的__onEnd不再暴露给子类 | 子类应使用__debouncedOnEnd代替 | 0.77.0-rc.0 | 编译不通过 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/46271 | |
| 10 | enableOptimisedVirtualizedCells标志位被移除。 | enableOptimisedVirtualizedCells标志位从代码层面被移除，默认效果由false变更为true | 0.77.0-rc.0 | 编译不通过 | 开发态：编译失败 运行态：性能优化 | https://github.com/facebook/react-native/pull/47724 | |
| 11 | concurrentRoot启动项被移除 | ConcurrentRoot不再用于决定是否以并发模式运行应用程序 | 0.77.0-rc.0 | 编译不通过 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/47512 | |
| 12 | 移除了NativeMethods的与refs相关的配置 | 字符串refs被废弃，所以移除了NativeMethods的相关配置 | 0.77.0-rc.0 | 编译不通过 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/46734 | |
| 13 | 移除 @react-native-community/cli 的直接依赖 | 移除 @react-native-community/cli 的直接依赖 | 0.76.0-rc.1 | 打包失败 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/45927 | |
| 14 | 移除@react-native-community的直接依赖 | 移除@react-native-community的直接依赖 | 0.76.0-rc.0 | 打包失败 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/44928 | |
| 15 | 渲染相关的三个特性flag默认值改为开启 | 渲染相关的三个特性flag默认值改为开启，开启后可打断渲染循环响应JS事件 | 0.74.1-rc0 | 编译不通过 | 开发态：编译失败 运行态：性能优化 | https://github.com/facebook/react-native/pull/43396 | |
| 16 | 不再将某些三方库的Flow类型定义文件，作为“react native”包的一部分发布 | 将flow-typed/目录从pacakge/react-native/flow-typed/移到社区仓库的目录 | 0.73.0 | react-native不再包含部分三方库的Flow语法定义，因此开发者引用这部分依赖时要使用新的路径去依赖 | 开发态：打JSbundle失败报错 运行态：Metro调试运行可能红屏报错 | https://github.com/facebook/react-native/pull/37636 | |
| 17 | ts更严格的检查style中transform的语法格式 | <View style={{transform: [{scale: 1, translateX: 1}]}}>这样的写法在0.73.0后续使用会报错 | 0.73.0 | 开发者使用<View style={{ transform: [{ scale: 1, translateX: 1 }] }} /> 这样的写法会报错 | 开发态：打JSbundle失败报错 运行态：Metro调试运行可能红屏报错 | https://github.com/facebook/react-native/pull/38348 | |
| 18 | 移除YOGA中枚举值YGExperimentalFeatureFixAbsoluteTrailingColumnMargin，社区去除了fix-absolute-trailing-column-margin这个CSS属性 | 移除YOGA中枚举值YGExperimentalFeatureFixAbsoluteTrailingColumnMargin，社区去除了fix-absolute-trailing-column-margin这个CSS属性 | 0.73.0 | 开发者使用YGExperimentalFeature的YGExperimentalFeatureFixAbsoluteTrailingColumnMargin这个被删除枚举值会编译报错，fix-absolute-trailing-column-margin这个CSS属性的移除可能导致布局组件布局发生变化 | 开发态：编译失败 运行态：影响组件布局 | https://github.com/facebook/react-native/pull/37374 | |
| 19 | so列表发生变化 | so列表发生变化，是否影响开发者Cmakelist中集成so的配置 | 0.76.0 | 编译不通过 | 编译 | 目前0.77版本release包尚未构建，文档待方案确定后给出 | |
| 20 | jsx文件中字典类型参数传逗号分隔的多个字典打bundle报错 | jsx 文件中类似 style={{key1: value1}, {key2: value2}} 的写法，使用 0.76.0 及以上的 @react-native/bable-preset 配置时打包会报错。这种写法不是合法的tsx，即使老版本上没有构建报错也只有最后一个字典实际生效。 | 0.76.0 | 打js bundle时报错 | 开发态：打包失败 运行态：不影响 | https://github.com/facebook/react-native/pull/46696 | |
| 21 | 移除 butter 组件 | 移除了 ReactCommon 中的 butter 组件，cpp代码中butter namespace下所有符号不再可用，可以参考 butter 实现进行替换 | 0.73.0 | 编译报错 | 开发态：编译失败 运行态：不影响 | https://github.com/facebook/react-native/pull/39494 | |
| 22 | View Manager定义不再支持tsx文件类型 | @react-native/babel-preset 中添加 @react-native/babel-plugin-codegen 插件后会校验View Manager定义的文件类型，只支持ts，不支持tsx | 0.73.0 | 打js bundle时报错，报错消息类似 error xx.tsx: xx.tsx: Unable to parse file 'xx.tsx'. Unsupported filename extension. | 开发态：打包失败 运行态：不影响 | https://github.com/facebook/react-native/pull/38227 |
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
0
0- 0
已为社区贡献52条内容
所有评论(0)