React Native未使用ViewPagerAndroid却报错，跳转createMaterialTopTabNavigator页面触发

问题触发原因 #

• React Navigation 4 版本的 createMaterialTopTabNavigator 由 react-navigation-tabs 包提供实现，该包的低版本底层依赖旧版 react-native-tab-view，安卓端默认调用 React Native 核心库自带的 ViewPagerAndroid 组件
• ViewPagerAndroid 已在 React Native 0.61 及以上版本从核心库中移除，迁移到了社区维护包 @react-native-community/viewpager，因此会触发组件不存在的报错
• 你全局检索不到相关引用，是因为该引用存在于 node_modules 下的子依赖包中，项目业务代码本身没有直接引用

解决方法 #

方案1：替换顶层导航器的渲染组件（优先推荐） #

无需修改依赖源码，仅需在创建导航时增加配置即可：

1. 先安装适配React Navigation 4生态的社区版ViewPager：

npm install @react-native-community/viewpager@4.2.0 --save
# 或使用yarn
yarn add @react-native-community/viewpager@4.2.0

2. 在创建顶部标签导航的代码中，新增 viewPager 配置项指向社区版组件：

import ViewPager from '@react-native-community/viewpager';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

const TopTabNavigator = createMaterialTopTabNavigator({
  // 保留你原有的页面配置
  Tab1: Screen1,
  Tab2: Screen2,
}, {
  // 其他原有配置保持不变，新增以下配置项
  viewPager: ViewPager
});

方案2：升级兼容版本的依赖包 #

如果方案1不生效，可以将react-navigation-tabs升级到已经替换了内部ViewPager引用的兼容版本：

npm install react-navigation-tabs@2.11.2 --save

安装完成后清理React Native缓存，重启项目即可生效。

方案3：全局别名映射（适配多依赖引用场景） #

如果项目中还有其他子依赖也引用了已被移除的ViewPagerAndroid，可以通过babel别名统一替换所有相关引用：

1. 安装babel模块解析插件：

npm install babel-plugin-module-resolver --save-dev

2. 在项目根目录的babel.config.js中新增别名配置：

module.exports = {
  plugins: [
    ['module-resolver', {
      alias: {
        'ViewPagerAndroid': '@react-native-community/viewpager',
      },
    }],
  ],
};

配置完成后清理babel缓存，重启项目即可。

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