react-native - BottomTabNavigator 内容出现两次

Question

我正在用 Expo 构建一个 React-Native 应用程序。我尝试实现BottomTabNavigator，但由于某种原因，内容（TripsPage）出现了两次。

这是我的导航实现：

<NavigationContainer>
        <Stack.Navigator
          initialRouteName="TripsPage"
          screenOptions={{
            headerStyle: {
              backgroundColor: Colors.primary,
            },
            headerTintColor: 'black',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 18,
            },
          }}
        >
          <Stack.Screen
            name="TripDetails"
            component={TripDetails}
            options={{ title: 'Trip Details' }}
          />
          <Stack.Screen
            name="TripsPage"
            component={TripsPage}
            options={{ title: 'Home' }}
          />
          <Stack.Screen
            name="MVPForm"
            component={Form}
            options={{ title: 'Trippy' }}
          />
          <Stack.Screen
            name="Result"
            component={Result}
            options={{ title: 'Car Allocation' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={TripsPage} />
        </Tab.Navigator>
      </NavigationContainer>

有人熟悉这个问题吗？

Answer 1

您好，尝试只使用一个<NavigationContainer>并将所有导航器包装在其中，如下所示：

<NavigationContainer>
    <Stack.Navigator
      initialRouteName="TripsPage"
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors.primary,
        },
        headerTintColor: 'black',
        headerTitleAlign: 'center',
        headerTitleStyle: {
          fontWeight: 'bold',
          fontSize: 18,
        },
      }}
    >
      <Stack.Screen
        name="TripDetails"
        component={TripDetails}
        options={{ title: 'Trip Details' }}
      />
      <Stack.Screen
        name="TripsPage"
        component={TripsPage}
        options={{ title: 'Home' }}
      />
      <Stack.Screen
        name="MVPForm"
        component={Form}
        options={{ title: 'Trippy' }}
      />
      <Stack.Screen
        name="Result"
        component={Result}
        options={{ title: 'Car Allocation' }}
      />
    </Stack.Navigator>
    <Tab.Navigator>
      <Tab.Screen name="Home" component={TripsPage} />
    </Tab.Navigator>
  </NavigationContainer>