React native 反应导航5嵌套屏幕can'；我不能回到主屏幕

我搞不清楚嵌套的导航器。我有一个带以下按钮的底部选项卡导航器：

Home
Stations
  -> StationDetail (StationScreen)
Shows
  -> ShowDetail (ShowScreen)

在“我的主页”选项卡上，我有一个与“电台”页面相同的电台的水平滚动条

问题：当我使用此代码从主页导航到站点详细信息页面以导航到嵌套导航器时，我无法导航回主/根站点屏幕选项卡

navigation.navigate('Stations', {
      screen: 'Station',
      station: props.station,
    });

但是，如果我先导航到stations选项卡，然后返回主页，然后单击某个站点，它将按预期工作。如何修复此行为？我见过“重置”之类的东西，但我不确定该放在哪里。下面是我的代码的简化摘录：

AppStack.js：

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import HomeStack from './HomeStack';
import StationStack from './StationStack';
import ShowStack from './ShowStack';

const Tab = createBottomTabNavigator();

const AppStack = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Stations" component={StationStack} />
      <Tab.Screen name="Shows" component={ShowStack} />
    </Tab.Navigator>
  );
};

export default AppStack;

从“React”导入React；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“./HomeStack”导入HomeStack；
从“/StationStack”导入StationStack；
从“/ShowStack”导入ShowStack；
const Tab=createBottomTabNavigator（）；
常量AppStack=（）=>{
返回(
);
};
导出默认应用堆栈；

HomeStack.js

import React from 'react';
import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import TopBarRight from '../components/TopBarRight';
import HomeScreen from '../screens/HomeScreen';
import StationScreen from '../screens/StationScreen';
import {useNavigation} from '@react-navigation/native';

const Top = createStackNavigator();

const HomeStack = () => {
  const navigation = useNavigation();
  return (
    <Top.Navigator>
      <Top.Screen name="Welcome" component={HomeScreen} />
    </Top.Navigator>
  );
};

export default HomeStack;

从“React”导入React；
从“react native”导入{View}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../components/TopBarRight”导入TopBarRight；
从“../screens/HomeScreen”导入主屏幕；
从“../screens/StationScreen”导入StationScreen；
从'@react-navigation/native'导入{useNavigation}；
const Top=createStackNavigator（）；
const HomeStack=（）=>{
const navigation=useNavigation（）；
返回(
);
};
出口违约本币；

HomeScreen.js（相关部分）

StationScroll只加载一个车站徽章列表 StationBadge.js

const StationBadge = (props: StationProps) => {
  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('Stations', {
      screen: 'Station',
      station: props.station,
    });
    console.log(`station pressed: ${props.station.location}`);
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.container}>
        <Image
          style={styles.image}
          source={{
            uri: `https://example.com/img/station-logos/${props.station.callsign}.png`,
          }}
        />
        <Text numberOfLines={1} style={styles.text}>
          {props.station.location}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

export default StationBadge;

const StationBadge=（道具：StationProps）=>{
const navigation=useNavigation（）；
const onPress=（）=>{
导航。导航（'站'{
屏幕：“车站”，
车站：道具，车站，
});
log（`station pressed:${props.station.location}`）；
};
返回(
{props.station.location}
);
};
导出默认StationBadge；

这里还有StationStack.js

import React from 'react';
import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import StationsScreen from '../screens/StationsScreen';
import StationScreen from '../screens/StationScreen';
import {StackActions, useNavigation} from '@react-navigation/native';

const SS = createStackNavigator();

const StationStack = () => {
  const navigation = useNavigation();

  return (
    <SS.Navigator>
      <SS.Screen name="Stations" component={StationsScreen}/>
      <SS.Screen name="Station"  component={StationScreen} />
    </SS.Navigator>
  );
};

export default StationStack;

从“React”导入React；
从“react native”导入{View}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../screens/StationScreen”导入StationScreen；
从“../screens/StationScreen”导入StationScreen；
从'@react-navigation/native'导入{StackActions，useNavigation}；
const SS=createStackNavigator（）；
const StationStack=（）=>{
const navigation=useNavigation（）；
返回(
);
};
导出默认StationStack；

我希望你做得很好。 据我所知，您试图访问的屏幕与主屏幕不在同一堆栈中。 在HomeStack中，我建议您添加以下代码行：

// HomeStack.js page 
...
...
import StationScreen from '../screens/StationScreen';
...
...
<Top.Navigator initialRouteName="Welcome">
  <Top.Screen name="Welcome" component={HomeScreen} />
  <Top.Screen name="Stations" component={StationsScreen} />
</Top.Navigator>

//HomeStack.js页面
...
...
从“../screens/StationScreen”导入StationScreen；
...
...

---

有了这个，你可以从家里切换到电台，反之亦然，请尝试一下，并告诉我它是否有效。

我应该一直阅读：

渲染导航器中定义的初始路线

默认情况下，当您在嵌套导航器中导航屏幕时，指定的屏幕被用作初始屏幕，并且导航器上的初始路线道具被忽略。此行为与React导航4不同

如果需要渲染导航器中指定的初始路线，可以通过设置initial:false，禁用将指定屏幕用作初始屏幕的行为：

navigation.navigate('Stations', {
  screen: 'Station',
 initial: false,
});

---

这种方式确实有效，我不确定在两个不同的导航器中链接一个屏幕是不是一个好主意（一个在home，一个在stations列表页面，指向同一页面）。这是做这件事的标准方法吗？此外，它不会突出显示底部选项卡导航器的“stations”选项卡，它在“home”选项卡中显示。我找到了答案，首字母：False亲爱的，很高兴你找到了答案。如果您感兴趣，让我们通过LinkedIn进行连接，分享机会和经验

navigation.navigate('Stations', {
  screen: 'Station',
 initial: false,
});