Question

我无法找出嵌套的导航器。我有一个带有这些按钮的 bottomTabNavigator：

.pointer-container {
  width: 100%;
  height: 66px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-top: 12px;
  padding-bottom: 18px;
  color: white;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    background: #0D7FC2;
    border-radius: 2px;
  }
  .left:after {
    content: '';
    position: absolute;
    right: -44px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 45px solid #0D7FC2;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
  }
  .right {
    flex: 1;
    align-items: center;
    display: flex;
    background: #CCE5F3;
    position: relative;
    z-index: -1;
    justify-content: center;
    color: #0D7FC2;
    border-radius: 2px;
  }
  .right:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 45px solid white;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
  }
}

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

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

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

但是，如果我先导航到电台选项卡，然后返回主页，然后单击一个电台，它会按预期工作。我该如何解决这种行为？我见过像“重置”这样的东西，但我不确定把它放在哪里。这是我的代码的简化摘录：

AppStack.js：

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

HomeStack.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;

HomeScreen.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;

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

<SafeAreaView styles={styles.container}>
  <StatusBar barStyle="light-content" />
  <ScrollView>
     <StationScroll />
  </ScrollView>
</SafeAreaView>

这里还有 StationStack.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;

Answer 1

希望你一切顺利。据我了解这个问题，您正在尝试访问与主屏幕不在同一堆栈中的屏幕。在 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>

有了这个，你可以从家里切换到车站，反之，请试试这个，看看它是否有效。

Answer 2

我应该继续阅读documentation：

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

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

如果需要渲染导航器中指定的初始路由，可以通过设置initial:false:

来禁用使用指定屏幕作为初始屏幕的行为

function test() {
    if (b==1) {
        if (c) {
            return d;
        } else {
            if (e > a[1]) {
                return e;
            } else {
                return a[1];
            }
        }
    } else {
        if (c) {
            return d;
        } else {
            return a[1];
        }
    }
}

a = test();

React Navigation 5 嵌套屏幕无法返回主屏幕

2 个答案: