reactjs - 在嵌套导航中移动到堆栈顶部（父屏幕）

Question

我有多个createStackNavigator不同的屏幕，我在我的屏幕中使用它们，createBottomTabNavigator所以所有屏幕都可以从其他屏幕访问，问题是当我导航到我的主屏幕时，createBottomTabNavigator如果我打开任何其他屏幕，如联系人屏幕 createStackNavigator，那么如果我导航在我的配置屏幕中createBottomTabNavigator，然后如果我再次返回主屏幕，那么我仍然看到联系人屏幕（因为它在堆栈顶部）而不是看到主屏幕，我必须再次点击主页所以它带我去那里。

这是因为我使用的是嵌套导航，我不太确定如何直接导航到 Home 或任何其他屏幕，createBottomTabNavigator而不是导航到createStackNavigator.

这是我的意思的一个例子：

const HomeStack = createStackNavigator();
const Home = () => {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen
        name="SearchScreen"
        component={SearchScreen}
      />
      <HomeStack.Screen name="ContactScreen" component={ContactScreen} />
      <HomeStack.Screen name="FavoriteScreen" component={FavoriteScreen} />
    </HomeStack.Navigator>
  );
};

const HelpStack = createStackNavigator();
const Help = () => {
  return (
    <HelpStack.Navigator
      initialRouteName="Help"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HelpStack.Screen
        name="SearchScreen"
        component={SearchScreen}
      />
      <HelpStack.Screen name="ContactScreen" component={ContactScreen} />
      <HelpStack.Screen name="FavoriteScreen" component={FavoriteScreen} />
    </HelpStack.Navigator>
  );
};

const ProfileStack = createStackNavigator();
const Profile = () => {
  return (
    <ProfileStack.Navigator
      initialRouteName="CreateProfile"
      screenOptions={{
        headerShown: false,
      }}
    >
     <ProfileStack.Screen
        name="SearchScreen"
        component={SearchScreen}
      />
      <ProfileStack.Screen name="ContactScreen" component={ContactScreen} />
      <ProfileStack.Screen name="FavoriteScreen" component={FavoriteScreen} />
    </ProfileStack.Navigator>
  );
};

const Tab = createBottomTabNavigator();
const MainTabs = () => (
  <Tab.Navigator
    initialRouteName="Home"
  >
    <Tab.Screen
      name="Home"
      component={Home}
    />
    <Tab.Screen
      name="Help"
      component={Help}
    />
    <Tab.Screen
      name="Profile "
      component={Profile}
    />
  </Tab.Navigator>
);

所以我转到主页组件，然后从那里转到配置文件屏幕，然后如果转到帮助屏幕，然后如果我点击主页，它将带我到配置文件屏幕而不是主屏幕，我怎样才能确保这不会发生因为它有点混乱。我createBottomTabNavigator在所有其他屏幕中都可以看到选项卡，所以这就是我需要直接移动到根屏幕的原因。

标签： reactjsreact-nativeandroid-studioreact-navigation