You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native升级后跳转页面出现Cannot read property prototype报错求助

问题排查:React Native 0.72.3 页面跳转渲染报错

我有一个纯React Native(未使用Expo)的移动端应用,将依赖升级至最新版本并迁移到React Native 0.72.3后,从首页跳转至任意其他页面时出现渲染报错。报错截图如下:
报错截图

报错栈追踪:

in Pager (created by TabView)
in RCTView (created by View)
in View
in GestureHandlerRootView (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by MyScheduleTopTabs)
in MyScheduleTopTabs (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View
in Unknown (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen
in Unknown (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in CardStack
in KeyboardManager (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in GestureHandlerRootView
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in StackNavigator (created by MyScheduleStackScreen)
in MyScheduleStackScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by SceneContent)
in SceneContent (created by BottomTabView)
in RNSScreen
in Unknown (created by Screen)
in Screen (created by ResourceSavingScene)
in ResourceSavingScene (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in BottomTabNavigator (created by AppStack)
in AppStack (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainer (created by AppNavigator)
in AppNavigator (created by App)
in ThemeProvider (created by App)
in I18nextProvider (created by App)
in ApolloProvider (created by App)
in NetworkConnectivity (created by ReduxNetworkProvider)
in ReduxNetworkProvider (created by Connect(ReduxNetworkProvider))
in Connect(ReduxNetworkProvider) (created by App)
in NetworkConnectivity (created by NetworkProvider)
in NetworkProvider (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in (RootComponent), js engine: hermes

当前使用的导航包版本:

"react-navigation": "^4.4.3",
"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/material-top-tabs": "^5.1.7",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",

排查思路及解决方案

1. 修复导航版本混合冲突

你同时使用了react-navigation@4.x和@react-navigation/*@5.x,这两个版本属于完全不同的架构,存在致命兼容性问题。React Navigation 5+是重构版本,无法与4.x混用。

  • 彻底移除旧版react-navigation@4.x及其关联依赖(如react-navigation-stack、react-navigation-tabs等)
  • 将所有@react-navigation/*包升级到与RN 0.72.3兼容的v6.x版本(v5.x已停止维护,v6.x对新版RN支持更完善)
  • 根据React Navigation v6文档调整导航配置,包括路由定义、导航器嵌套逻辑等

2. 适配RN 0.72.3依赖要求

RN 0.72.x对依赖版本要求严格,旧版导航库可能未适配新核心组件或Hermes引擎:

  • 确认react-native-screens、react-native-gesture-handler版本与RN 0.72.3兼容(v6.x导航需要对应版本的这两个依赖)
  • 执行npx react-native doctor检查并自动修复依赖不兼容问题

3. 定位页面渲染异常点

报错栈指向MaterialTopTabNavigator和MyScheduleTopTabs组件,可按以下步骤排查:

  • 临时注释MyScheduleTopTabs组件,验证页面跳转是否正常,确认是否为该组件导致的问题
  • 检查MyScheduleTopTabs内部代码:
    • 是否存在RN 0.72已废弃的组件或API调用
    • 是否有异步状态更新逻辑导致的渲染冲突
    • 验证TabView的数据源、路由配置是否合法

4. 清理缓存避免干扰

执行以下命令清理项目缓存,排除旧编译文件的影响:

rm -rf node_modules && yarn install
npx react-native clean
rm -rf ios/Pods && cd ios && pod install && cd ..

内容的提问来源于stack exchange,提问作者catBuddy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 20:23:38