React Native Pager View 在 Android 14 上的点击事件失效问题分析与解决方案

问题现象

在使用 React Native Pager View 库时，特别是在 Android 14 设备（如 OnePlus 8 Pro 运行 Oxygen OS）上，开发者报告了一个关键问题：从第二页开始，页面内的按钮点击事件不再响应。这个问题在使用新架构（New Architecture）时尤为明显。

问题复现条件

该问题在以下环境中可稳定复现：

• React Native Pager View 版本 v7.0.0-rc.2 或 v6.3.3
• 启用了新架构（New Architecture）
• Android 14 操作系统（特别是 OnePlus 8 Pro 设备）
• 使用 PagerView 组件，从第二页开始交互失效

根本原因分析

经过社区开发者深入调查，发现问题根源在于 PagerView 内部对子视图的样式处理。在 Android 平台上，特别是新架构下，视图层级的位置计算存在异常，导致触摸事件无法正确传递到子组件。

关键问题点在于 utils.tsx 文件中的 childrenWithOverriddenStyle 函数，该函数负责为 PagerView 的子视图添加样式覆盖。原始实现缺少了对 Android 平台特殊的定位处理。

解决方案

社区提出了两种有效的解决方案：

方案一：添加绝对定位样式

export const childrenWithOverriddenStyle = (
  children?: ReactNode,
  pageMargin = 0
) => {
  return Children.map(children, (child) => {
    return (
      <View
        style={{
          ...StyleSheet.absoluteFill,  // 关键修复
          height: '100%',
          width: '100%',
          paddingHorizontal: pageMargin / 2,
        }}
        collapsable={false}
      >
        {child}
      </View>
    );
  });
};

方案二：平台特定定位处理（官方采纳方案）

最终官方采纳了更精细的平台特定处理方案，只为 Android 平台添加绝对定位：

export const childrenWithOverriddenStyle = (
  children?: ReactNode,
  pageMargin = 0
) => {
  return Children.map(children, (child) => {
    return (
      <View
        style={{
          height: '100%',
          width: '100%',
          paddingHorizontal: pageMargin / 2,
          position: Platform.OS === 'android' ? 'absolute' : undefined,
        }}
        collapsable={false}
      >
        {child}
      </View>
    );
  });
};

解决方案对比

1. 全面绝对定位方案：

   • 优点：简单直接，能解决 Android 上的问题
   • 缺点：可能影响 iOS 平台上的视图回收机制，导致标签切换时视图保留问题

2. 平台特定定位方案：

   • 优点：针对性强，只影响 Android 平台
   • 缺点：需要额外引入 Platform 模块

官方修复

该问题已在 React Native Pager View v6.4.1 版本中得到正式修复。官方采用了平台特定的定位处理方案，确保了兼容性和稳定性。

临时解决方案

对于无法立即升级的项目，开发者可以采用以下临时方案：

1. 修改 Touchable 组件：将 onPress 替换为 onPressOut 事件

   <TouchableOpacity onPressOut={() => console.log("clicked")}>
     <Text>Click me</Text>
   </TouchableOpacity>
   

2. 手动补丁：直接修改 node_modules 中的 utils.tsx 文件

最佳实践建议

1. 及时升级到 v6.4.1 或更高版本
2. 在新架构下进行全面测试，特别是 Android 14 设备
3. 对于复杂的交互场景，考虑添加额外的触摸事件处理逻辑
4. 关注官方更新，获取最新的兼容性修复

总结

React Native Pager View 在 Android 14 上的点击事件失效问题，揭示了新架构下视图层级和事件传递机制的微妙变化。通过社区协作和官方响应，这一问题得到了有效解决，为开发者提供了更稳定的跨平台组件体验。