自定义导航栏中的 NavigationContainer 问题

Question

我有一些无法克服的问题。

这是我的 TabBar 组件： 导航栏.js

...
// Js
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
//Pages
import Home from "../../pages/Home"; //Home Page

const Tabs = AnimatedTabBarNavigator();
// thanks. https://js.coach/package/react-native-animated-nav-tab-bar
export default () => {
  return (
    <Tabs.Navigator
      // default configuration from React Navigation
      tabBarOptions={{
        activeTintColor: "#2F7C6E",
        inactiveTintColor: "#222222",
        activeBackgroundColor: "#e4e4e7",
      }}
    >
      <Tabs.Screen name="Home" component={Home} />
    </Tabs.Navigator>
  );
};

这是我的 App.js：

//NavBar
import NavBar from "./src/components/NavigationBar/NavBar";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <NavBar />
      </NavigationContainer>
    </View>
  );
}
...

错误及解释：

Component Exception
Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?

我正在使用这个包 => react-native-animated-nav-tab-bar

我该如何解决这个问题？

Answer 1

这是react-native-animated-nav-tab-bar 包中的一个问题。它将@react-navigation/native 添加到其dependencies 中，这使得可以包含@react-navigation/native 的多个版本，因为您也将在自己的package.json 中拥有它，并且@react-navigation/native 的多个版本会导致此类问题：

https://github.com/torgeadelin/react-native-animated-nav-tab-bar/blob/0642630cb487a496b0619201daa68cdd164f8f14/package.json#L59

图书馆需要将@react-navigation/native移动到peerDependencies。

react-native-screens 也是如此，它在 dependencies 中，而它应该在 peerDependencies 中。

请在图书馆的仓库中打开一个问题。