无法从底部选项卡导航器导航到堆栈导航器

Question

我正在尝试使用 React Navigation 从 bottomTabNavigator Screen（即 Home）导航到 Stack Navigator Screen（即 Trip）。

在我的 NavigationContainer 中，我有一个包含AppNavigator（使用createBottomNavigator）和AuthenticationNavigator（使用createStackNavigator）的函数。

在我的App.js 中，它检查用户是否登录，然后从那里为用户显示正确的导航。如果用户已登录，则他们可以访问AppNavigator 和HomeScreenNavigator。

  return (
    <NavigationContainer>
      {isUserLoggedIn === 'initializing' && <Initializing />}
      {isUserLoggedIn === 'loggedIn' &&
        (<AppNavigator updateAuthState={updateAuthState} /> 
        ))}
      {isUserLoggedIn === 'loggedOut' && (
        <AuthenticationNavigator updateAuthState={updateAuthState} />
      )}
    </NavigationContainer>
  );

我所做的是添加HomeScreenNavigator，它将包含用户可以在BottomTabNavigator 屏幕下访问的所有屏幕，Home 和Home 内的所有嵌套屏幕使用Stack Navigators。

  const HomeScreenNavigator = props => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Trip" component={Trip} />
      </Stack.Navigator>
    );
  };

AppNavigator 在用户登录时用于bottomTabNavigation。这是Home 组件，我从中导航到Trip 组件。

我不知道如何将HomeScreenNavigator 传递到这个bottomTabNavigation 中，或者是否有可能。当用户登录时，这是用户应该能够使用的唯一导航。

  const AppNavigator = props => {
    return (
      <BottomTab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName = '';

            if (route.name === 'Home') {
              iconName = 'home';
            } else if (route.name === 'User Profile') {
              iconName = 'person';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'black',
          inactiveTintColor: 'gray',
        }}>
        <BottomTab.Screen name="Home">
            <Home updateAuthState={props.updateAuthState} />
        </BottomTab.Screen>
        <BottomTab.Screen name="User Profile">
            <UserProfile
              updateAuthState={props.updateAuthState}
            />
        </BottomTab.Screen>
      </BottomTab.Navigator>
    );
  };

AuthenticationNavigator 处理所有身份验证过程的堆栈导航。

  const AuthenticationNavigator = props => {
    return (
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="SignIn">
            <SignIn updateAuthState={props.updateAuthState} />
        </Stack.Screen>
        <Stack.Screen name="SignUp" component={SignUp} />
        <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
        <Stack.Screen name="ConfirmSignUp" component={ConfirmSignUp} />
      </Stack.Navigator>
    );
  };

这是Home 组件，当用户单击按钮时，他们将被导航到当前仅显示文本Trip 的Trip 组件。

export default function Home({updateAuthState, navigation}) {

  return (
    <View style={styles.container}>
      <AppButton
        title="Start a trip"
        onPress={() => {
          navigation.navigate('Trip');
        }}
      />
    </View>
  );
}

现在当用户点击按钮时，即使我已经在HomeScreenNavigator 下设置了屏幕名称Trip，他们得到的错误如下。

The action 'NAVIGATE' with payload {"name":"Trip"} was not handled by any navigator.

Answer 1

我设法解决了这个问题，这就是我所做的。

在AppNavigator 中，我将Home Screen 下的所有屏幕及其组件移动到HomeScreenNavigator。

  const HomeScreenNavigator = props => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} updateAuthState={props.updateAuthState}/>
        <Stack.Screen name="Trip" component={Trip} />
      </Stack.Navigator>
    );
  };

在AppNavigator中，主屏幕下所有屏幕的选项卡都作为组件传入。

const AppNavigator = props => {
    return (
      <BottomTab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName = '';

            if (route.name === 'Home') {
              iconName = 'home';
            } else if (route.name === 'User Profile') {
              iconName = 'person';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'black',
          inactiveTintColor: 'gray',
        }}>
        <BottomTab.Screen name="Home" component={HomeScreenNavigator} updateAuthState={props.updateAuthState}/>
        <BottomTab.Screen name="User Profile">
            <UserProfile
              updateAuthState={props.updateAuthState}
            />
        </BottomTab.Screen>
      </BottomTab.Navigator>
    );
  };

现在，当我在 Home Screen 并按下按钮导航到 Trip 组件时，它按预期工作，并且有一个返回按钮可以导航回 Home Screen。