即使使用 navigation.navigate('name") 也无法在堆栈之间导航

Question

我无法在嵌套堆栈之间移动。

我已经追踪了从 RootStackScreen 到我想要显示的所有不同屏幕的路线。

在同一堆栈中的屏幕周围推送、弹出或返回完全没有问题，但是当最初显示屏幕时我无法在它们之间移动。

useStates 是否会阻止我在堆栈之间导航，还是我还缺少其他东西？！

提前致谢。

import React, {useState, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Feather'
import firebase from 'firebase'

// Screens
// Modal
import Modal from '../screens/modal';
// Onboarding
import OnboardingOne from '../screens/onboardingOne'
import OnboardingTwo from '../screens/onboardingTwo'
import OnboardingThree from '../screens/onboardingThree'
import OnboardingFour from '../screens/onboardingFour'
import SignIn from '../screens/signIn'
import CreateUser from '../screens/createUser'
import OnboardingUser from '../screens/onboardingUser'
// Loading
import Loading from '../screens/loading'
// Tabs
import HomeScreen from '../screens/home'
import AboutScreen from '../screens/about'
import OrganisationScreen from '../screens/organisation'
// Profile
import ProfileScreen from '../screens/profile'
import SignOutScreen from '../screens/signOut'

const OnboardingStack = createStackNavigator();
const OnboardingStackScreen = () => (
  <OnboardingStack.Navigator 
    headerMode='screen' 
    screenOptions={{animationEnabled: true}} 
    initialRouteName="OnboardingUser" >

    <OnboardingStack.Screen
      name="OnboardingOne"
      component={OnboardingOne}
      options={{
        headerTitle: 'Onboarding One',
      }}
    />
    <OnboardingStack.Screen
      name="OnboardingTwo"
      component={OnboardingTwo}
      options={{
        headerTitle: 'OnboardingTwo'
      }}
    />
    <OnboardingStack.Screen
      name="OnboardingThree"
      component={OnboardingThree}
      options={{
        headerTitle: 'OnboardingThree'
      }}
    />
    <OnboardingStack.Screen
      name="OnboardingFour"
      component={OnboardingFour}
      options={{
        headerTitle: 'Onboarding Four'
      }}
    />
    <OnboardingStack.Screen
      name="SignIn"
      component={SignIn}
      options={{
        headerTitle: 'Sign in'
      }}
    />
    <OnboardingStack.Screen
      name="CreateUser"
      component={CreateUser}
      options={{
        headerTitle: 'Create User'
      }}
    />
    <OnboardingStack.Screen
      name="OnboardingUser"
      component={OnboardingUser}
      options={{
        headerTitle: 'Onboarding User',
      }}
    />
  </OnboardingStack.Navigator>
);

const ProfileStack = createStackNavigator();
const ProfileStackStackScreen = () => (
  <ProfileStack.Navigator headerMode='screen' screenOptions={{animationEnabled: true}} >
    <ProfileStack.Screen
      name="Profile"
      component={ProfileScreen}
      options={{
        headerTitle: 'Profile Screen',
      }}
    />
    <ProfileStack.Screen
      name="SignOut"
      component={SignOutScreen}
      options={{
        headerTitle: 'Sign Out',
      }}
    />
  </ProfileStack.Navigator>
);

const AppTabs = createBottomTabNavigator()
const AppTabsScreen = () => (
  <AppTabs.Navigator 
    initialRouteName="Home"
    tabBarOptions={{
    activeTintColor: 'orange',
    inactiveTintColor: 'gray',
  }}>
    <AppTabs.Screen name="Home" component={HomeScreen} options={{
      tabBarLabel: "Hem",
      tabBarIcon: props => <Icon name="home"
      size={props.size}
      color={props.color}/> 
    }}/>
    <AppTabs.Screen name="About" component={AboutScreen} options={{
      tabBarLabel: "Om",
      tabBarIcon: props => ( 
      <Icon name="feather"
      size={props.size}
      color={props.color}/>)
    }}/>
    <AppTabs.Screen name="Organisation" component={OrganisationScreen} options={{
      tabBarLabel: "Organisationer",
      tabBarIcon: props => <Icon name="list"
      size={props.size}
      color={props.color}/> 
    }}/>
    <AppTabs.Screen name="Profile" component={ProfileStackStackScreen} options={{
      tabBarLabel: "Profile",
      tabBarIcon: props => <Icon name="user"
      size={props.size}
      color={props.color}/> 
    }}/>
  </AppTabs.Navigator >
);

const RootStack = createStackNavigator();
const RootStackScreen = () => {

  const [isLoading, setIsLoading] = useState(true)
  const [isLoggedIn, setLoggedIn] = useState(false)

  // Do we have a user?
    var user = firebase.auth().currentUser;
  // Set wait time for loading screen
  useEffect(() => {
      setIsLoading(!isLoading)
  }, [])


 return (
  <RootStack.Navigator
  headerMode="none"
  screenOptions={{ animationEnabled: false }}
  mode="modal">

  {isLoading ? (
    <RootStack.Screen name="Loading" component={Loading} />
  ) : !isLoggedIn ? (
    <RootStack.Screen name="AppDrawerScreen" component={OnboardingStackScreen} />
  ) : (
    <RootStack.Screen name="TabHomeScreen" component={AppTabsScreen} />
  )}

  <RootStack.Screen
    name="Modal"
    component={ Modal } 
    options={{ animationEnabled: true }}
  />

  <RootStack.Screen
    name="Alert"
    component={ Modal }
    options={{ 
      animationEnabled: true,
      cardStyle: { backgroundColor: 'rgba(0,0,0,0.15)'},
      cardOverlayEnabled: true,
      cardStyleInterpolator: ({current: { progress }}) => {

        return{
          cardStyle: {
            opacity: progress.interpolate({
              inputRange: [0, 0.5, 0.9, 1],
              outputRange: [0, 0.25, 0.7, 1],
            })
          },
          overlayStyle: {
            opacity: progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 0.5],
              extrapolate: 'clamp',
            })
          }
        }

      }
    }}
  />
</RootStack.Navigator>
);
};

export default () => {
  return (
  <NavigationContainer>
    <RootStackScreen/>
  </NavigationContainer>
  )
}

Answer 1

显然 useState (isLoading & isLoggedIn) 阻止我在这些组件之间导航。只需添加以下内容即可解决我的问题：

<RootStack.Screen name="BottomTabNavigation" component={AppTabsScreen}/>

放置在决定应用程序初始屏幕的钩子下，现在一切都按预期工作，navigation.navigate("BottomTabNavigation") 现在显示底部TabNavigator。