元素类型无效：需要一个字符串但未定义，检查 AnimatedComponent 的渲染方法 - ReactNavigation

Question

我在 ReactNavigation v6+ 上呆了几天，关于 invalid element type 也有几个类似的 questions/answers，但是 none 他们正在处理这个简单的例子：

问题是在添加 material-top-tap navigation from @react-navigation 模块后开始的。

为避免复杂性，我使用了最少需要的代码行来重现此错误：

import React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const TopBarOne = () => (
  <View>
    <Text>TOP BAR ONE</Text>
  </View>
);
const TopBarTwo = () => (
  <View>
    <Text>TOP BAR TWO</Text>
  </View>
);

const TopTabBar = createMaterialTopTabNavigator();

const TopBarStack = () => {
  return (
    <TopTabBar.Navigator>
      <TopTabBar.Screen name={'one'} component={TopBarOne} />
      <TopTabBar.Screen name={'two'} component={TopBarTwo} />
    </TopTabBar.Navigator>
  );
};

const NavigationProvider = () => {
  return (
    <NavigationContainer>
      <TopBarStack />
    </NavigationContainer>
  );
};

export default NavigationProvider;

完整的错误日志:


ERROR  Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
 or you might have mixed up default and named imports.

Check the render method of `AnimatedComponent`.

This error is located at:
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at PagerViewAdapter.tsx:123)
    in PagerViewAdapter (at TabView.tsx:79)
    in RCTView (at View.js:32)
    in View (at TabView.tsx:78)
    in TabView (at MaterialTopTabView.tsx:47)
    in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:136)
    in Unknown (at createMaterialTopTabNavigator.tsx:135)
    in MaterialTopTabNavigator (at testProvider.tsx:23)
    in TopBarStack (at testProvider.tsx:33)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at testProvider.tsx:32)
    in NavigationProvider (at App.tsx:17)
    in App (at hatman/index.tsx:22)
    in Root (at CodePush.js:585)
    in CodePushComponent (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)

包版本：

"react": "17.0.2",
"react-native": "0.67.2",

"@react-navigation/material-top-tabs": "^6.2.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1",
"react-native-gesture-handler": "^2.4.0",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-paper": "^4.12.0",
"react-native-tab-view": "^3.1.1",

目标设备：

Android

Answer 1

感谢 snack.expo.dev 的通知解决了我的问题。

点心会注意到一些third-library包版本与导航不兼容，所以我改变了一些包版本并且它运行良好。

旧模块版本（导致问题）：

"react-native-screens": "^3.13.1",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-safe-area-context": "^4.1.4",

新模块版本：

"react-native-screens": "^3.8.0",
"react-native-pager-view": "^5.4.6",
"react-native-safe-area-context": "^3.3.2",

无需降级或更改任何导航sub-modules版本。

元素类型无效：需要一个字符串但未定义，检查 AnimatedComponent 的渲染方法 - ReactNavigation

Element type is invalid: expected a string but got undefined, check the render method of AnimatedComponent - ReactNavigation

javascript

reactjs

react-native

react-navigation

react-navigation-v6