自定义导航栏中的 NavigationContainer 问题

Question

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

这是我的 TabBar 组件： NavBar.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 中包含它，以及包含多个版本的 [=11] =] 会导致这样的问题：

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

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

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

请在库的回购中打开一个问题。

自定义导航栏中的 NavigationContainer 问题

NavigationContainer Problem in Custom NavBar

react-native

react-navigation

react-navigation-v5