导航器只能包含 'Screen'、'Group' 或 'React.Fragment' 作为其直接子项（已找到 'BottomTap'）

Question

我试图在 expo 中使用 TabNavigator，但我遇到了问题，我创建了一个组件，其中的所有路由都在一个 Tab 中，而在另一个组件中我只导入它。

在这个组件中我有我的应用程序的所有路由：

const AppRouter = () => {
  const Stack = createNativeStackNavigator();
  const { user } = useContext(AuthContext);

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      {!user ? (
        <>
          <Stack.Screen name="login" component={Login} />
          <Stack.Screen name="register" component={Register} />
        </>
      ) : (
        <>
          <BottomTap />
        </>
      )}
    </Stack.Navigator>
  );
};

在这个组件中，我正在创建带有路由的选项卡：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "../../screens/Home";

const Tab = createBottomTabNavigator();

const BottomTap = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="home" component={Home} />
    </Tab.Navigator>
  );
};

export default BottomTap;

Answer 1

如错误所述，导航器只能包含其他导航器 - 甚至不能包含仅包含导航器的自定义组件。您可以通过将选项卡导航器组件放在屏幕内来解决此问题。

而不是

<BottomTap />

使用

<Stack.Screen name="bottomTap" component={BottomTap} />

您可以在 React Navigation 文档的“嵌套导航器”部分阅读更多相关信息：https://reactnavigation.org/docs/nesting-navigators/

Answer 2

您正在导航器内添加一个 React 组件，而不是 'Screen'、'Group' 或 'React.Fragment'。在另一个导航器中添加导航器的正确方法是：

...
{!user ? (
<>
    <Stack.Screen name="login" component={Login} />
    <Stack.Screen name="register" component={Register} />
</>
) : (
<>
    <Stack.Screen name="bottomTap" component={BottomTap} />
</>
)}
...

导航器只能包含 'Screen'、'Group' 或 'React.Fragment' 作为其直接子项（已找到 'BottomTap'）

A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'BottomTap')

react-native

tabs

expo