Expo集成@react-navigation/material-top-tabs遇RNCViewPager错误求助

问题场景 #

在Expo项目中集成@react-navigation/material-top-tabs实现导航栈，核心代码如下：

import React from 'react';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { TransitionPresets } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Posts from '../../components/activities/Sept/Posts';
import { headerRight } from '../../components/header/headerRight';
import styles from '../bottom/styles';

const Stack = createMaterialTopTabNavigator();

export default function SeptNavigator({ route }) {
    const drawerNavigation = useNavigation();
    const { septId } = route.params;
    console.log('SeptNavigator:', septId);
    
    return (
        <NavigationContainer independent={true}>
            <Stack.Navigator
                initialRouteName='Posts'
                backBehavior="none"
                screenOptions={({route}) => ({
                    headerRight: () => headerRight({route, drawerNavigation}),
                    headerTitleAlign:'center',
                    headerStyle: styles.header,
                    headerTitleStyle: styles.headerTitle,
                    headerMode :'screen',
                    gestureEnabled: true,
                    gestureDirection: 'horizontal',
                    gestureResponseDistance: 500,
                    gestureVelocityImpact: 2,
                    ...TransitionPresets.SlideFromRightIOS,
                    cardOverlayEnabled: true,
                })}
                >
                <Stack.Screen name="Posts">
                    {(props) => <Posts {...props} septId={septId} />}
                </Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>    
    );
};

错误信息 #

运行时抛出：

Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager.

已尝试移除expo-firebase-recaptcha并重建项目，问题未解决。

项目依赖（package.json片段） #

"dependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-transform-arrow-functions": "^7.22.5",
    "@babel/plugin-transform-shorthand-properties": "^7.22.5",
    "@babel/plugin-transform-template-literals": "^7.22.5",
    "@babel/preset-env": "^7.22.10",
    "@bacons/expo-router-top-tabs": "^0.1.0",
    "@callstack/react-theme-provider": "^3.0.9",
    "@expo/config-plugins": "~7.2.2",
    "@expo/prebuild-config": "~6.2.4",
    "@expo/webpack-config": "^19.0.0",
    "@react-native-community/hooks": "^3.0.0",
    "@react-native-firebase/app": "^18.7.3",
    "@react-native-firebase/auth": "^18.3.0",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/material-top-tabs": "^6.6.5",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "@rneui/base": "^4.0.0-rc.8",
    "@rneui/themed": "^4.0.0-rc.8",
    "@rnmapbox/maps": "^10.1.2",
    "atob": "^2.1.2",
    "base-64": "^1.0.0",
    "eas": "^0.1.0",
    "eas-cli": "^4.1.2",
    "expo": "^49.0.7",
    "expo-av": "~13.4.1",
    "expo-blur": "~12.4.1",
    "expo-build-properties": "^0.8.3",
    "expo-constants": "~14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-firebase-recaptcha": "^2.3.1",
    "expo-image-picker": "~14.3.2",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.4.0",
    "global": "^4.4.0",
    "gradle": "^1.2.4",
    "lodash": "^4.17.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-native": "0.72.6",
    "react-native-confirmation-code-field": "^7.3.2",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-pager-view": "6.0.1",
    "react-native-paper": "^5.10.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-redash": "^18.1.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-stretchy": "^4.0.0",
    "react-native-svg": "13.9.0",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.0.0",
    "react-native-viewpager": "^0.2.13",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.2.2",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "typescript": "^5.1.3"
  }

解决方案建议 #

1. 移除冲突的旧版ViewPager依赖 #

项目中同时存在两个ViewPager相关依赖：

• react-native-pager-view：官方维护的新版，是@react-navigation/material-top-tabs的必需依赖
• react-native-viewpager：已废弃的旧版，会和新版冲突，导致RNCViewPager组件注册异常

执行命令卸载旧版：

npm uninstall react-native-viewpager
# 或使用yarn
yarn remove react-native-viewpager

2. 清理缓存并重建项目 #

• 清理Expo本地缓存，重启开发服务器：

npx expo start --clear

• 如果使用EAS构建，先清理构建缓存再重新构建：

eas build --clear-cache

3. 检查NavigationContainer的嵌套使用 #

SeptNavigator中嵌套了独立的NavigationContainer，如果该组件已经在父级NavigationContainer内部被调用，无需再嵌套独立容器，直接移除外层的<NavigationContainer independent={true}>，仅保留Stack.Navigator即可。嵌套容器可能导致原生组件注册逻辑混乱。

4. 验证依赖版本兼容性 #

检查react-native-pager-view是否存在版本冲突：

npm ls react-native-pager-view

如果输出显示多个版本，执行以下命令重新安装指定版本：

npm install react-native-pager-view@6.0.1
# 或
yarn add react-native-pager-view@6.0.1

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