自定义导航栏中的 NavigationContainer 问题

Posted 2023-02-21

【中文标题】自定义导航栏中的 NavigationContainer 问题

【英文标题】：NavigationContainer Problem in Custom NavBar

【发布时间】：2021-10-17 02:44:50

【问题描述】：

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

这是我的 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

我该如何解决这个问题？

【参考方案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 中。

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

【讨论】：

我又遇到了同样的错误。我会考虑你的要求。

@AlperTaş 请务必在问题中分享我的答案，因为我认为图书馆作者不知道他们所做的是不正确的。