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 以及 {{1} 内的所有嵌套屏幕}} 使用 Home。

Stack Navigators

const HomeScreenNavigator = props => { return ( <Stack.Navigator> <Stack.Screen name="Trip" component={Trip} /> </Stack.Navigator> ); }; 在用户登录时用于 AppNavigator。这是我导航到 bottomTabNavigation 组件的 Home 组件。

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

bottomTabNavigation

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> ); } 下设置了屏幕名称 Trip。

HomeScreenNavigator

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 中，主屏幕下所有屏幕的 Tab 作为组件传入。

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。< /p>

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

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

1 个答案:

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

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

1 个答案:

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