对于 react-navigation + web，通过 URL 直接导航到嵌套路由会导致 header 中缺少后退按钮

Question

我的主屏幕有一个 link 可以转到 DeckScreen。当我单击一个按钮导航到 DeckScreen 时，header 栏中的后退按钮显示正常。

但是当我在浏览器中重新加载页面或直接导航到此 URL (localhost/deck) 时，没有后退按钮。

点击 BottomTab 没有任何作用，不会带我们回到主页。

我正在使用具有 HomeStack 的 BottomTab，其中包含 HomeScreen 和 DeckScreen。

export default function Navigation () {
  return (
    <NavigationContainer linking={linking} theme={DefaultTheme}>
      <RootNavigator/>
    </NavigationContainer>
  );
}

function RootNavigator () {

  return (
  <Stack.Navigator>
  <Stack.Screen name='Root' component={Nav} options={{headerShown: false, ...fade}}/>
  <Stack.Group screenOptions={{presentation: 'modal'}}>
    <Stack.Screen name='Modal' component={ModalScreen}/>
  </Stack.Group>
</Stack.Navigator>
  ）；
}


function HomeStackScreen () {
  return (
    <HomeStack.Navigator initialRouteName='dashboard'>
      <HomeStack.Screen name='dashboard' component={HomeScreen} options={{headerShown: false, title: 'Dashboard'}}/>
      <HomeStack.Screen name='deck' component={DeckScreen} options={{title: 'Deck'}}/>
    </HomeStack.Navigator>
  );
}

function Nav ({navigation}) {    
  return (
    <BottomTab.Navigator
      initialRouteName='home'
      screenOptions={{
        headerShown: false,
     }}>
      <BottomTab.Screen
        name='home'
        component={HomeStackScreen}
       })}
     />
  
    </BottomTab.Navigator>
  );
}

这是我的链接：

const linking: LinkingOptions<RootStackParamList> = {
 prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          home: {
            screens: {
              dashboard: 'dashboard',
              deck: 'deck' 
            },
          }
        },
      }
    }
  }
};

我试过使用 getStateFromPath 尝试在堆栈中注入路由，但它不起作用并且感觉不对。

你怎么告诉 React Navigation，这个屏幕是堆栈的一部分，它应该总是有一个后退按钮header？

Answer 1

从 link 打开时没有后退按钮的原因很可能是因为您没有在屏幕中设置 headerLeft 并且导航堆栈中没有其他屏幕（你直接去了DeckScreen）。

您可以在 Screen 中设置 option 中的后退按钮，如下例所示：

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

你可以找到例子here

对于 react-navigation + web，通过 URL 直接导航到嵌套路由会导致 header 中缺少后退按钮

For react-navigation + web, directly navigating to a nested route via URL results in missing back button in the header

react-native

react-navigation