React Native Bottom Sheet 在 Expo 51 新架构下的兼容性问题解析

问题背景

React Native Bottom Sheet 是一个流行的底部弹窗组件库，在 Expo 51 版本中，当启用新架构（Bridgeless 模式）时，开发者遇到了一个关键错误："Unexpected nativeTag: function"。这个错误主要出现在使用 BottomSheetScrollView 或 BottomSheetFlatList 组件时，导致应用无法正常渲染这些组件。

错误原因分析

该问题的根源在于 React Native 新架构（Fabric）与旧架构在组件引用处理方式上的差异。具体来说：

1. 引用获取机制变化：在新架构下，组件引用的获取方式发生了变化，导致 getRefNativeTag 工具函数无法正确获取 nativeTag。

2. findNodeHandle 的兼容性：React Native Reanimated 在新架构中保留了 findNodeHandle 方法，但 Web 平台不支持此方法，这造成了跨平台兼容性问题。

3. 版本引入点：这个问题是在 v4.4.5 版本中引入的，与 #1100 这个改动有关。

技术细节

问题的核心在于 getRefNativeTag.ts 文件中的引用检查逻辑。在新架构下，组件引用不再直接包含 nativeTag 属性，而是需要通过其他方式获取。当检查失败时，系统会抛出错误信息：

Unexpected nativeTag: function; nativeTag=[object Object]
createBottomSheetScrollableComponent's ScrollableComponent needs to return
a reference that contains a nativeTag to a Native HostComponent.

解决方案

目前社区提供了几种解决方案：

1. 临时补丁方案：通过 patch-package 临时注释掉 getRefNativeTag.ts 中的错误抛出代码，这可以暂时解决问题但非长久之计。

2. 版本降级：回退到 v4.4.5 之前的版本，避免这个问题的出现。

3. 平台特定代码：对于 Web 平台，避免使用 BottomSheetFlatList 和 BottomSheetScrollView 组件。

4. 等待官方修复：Discord 团队已经在其 fork 版本中修复了这个问题，合并了 #1823 这个 PR，并在 v4.6.4 版本中发布。

最佳实践建议

对于正在使用 Expo 51 和新架构的开发者：

1. 如果急需解决问题，可以采用临时补丁方案，但需要密切关注官方更新。

2. 考虑使用 react-native-gesture-handler 中的 FlatList 作为临时替代方案。

3. 对于新项目，建议直接使用 v4.6.4 或更高版本。

4. 在跨平台开发时，注意添加平台判断逻辑，避免在 Web 平台使用不兼容的组件。

未来展望

随着 React Native 新架构的逐步成熟，这类兼容性问题将逐渐减少。组件库开发者需要：

1. 加强对新架构的适配测试

2. 提供更清晰的版本兼容性说明

3. 考虑为不同架构提供不同的实现方案

这个问题也提醒我们，在大型框架升级时，需要特别注意核心组件库的兼容性，做好充分的测试和回退方案。