Question

在这种情况下，可以通过深层链接打开屏幕。有一个<BackButton />组件，我希望按钮的行为如下：

如果此屏幕由navigator.navigate打开，请返回。
如果通过深层链接打开了此屏幕，请转到主屏幕。

这样的导航器结构

根（堆栈导航器）
- 标签（底部标签导航器）
  - 首页
  - 个人
- 主（堆栈导航器）
  - 商店

在一开始，我写了这样的代码：

const onBackButtonPress = useCallback(() => {
  if (navigation.canGoBack()) {
    navigation.goBack()
  } else {
    navigation.navigate('Tab', { screen: 'Home' })
  }
), [navigation])

此代码有效，但是使用navigation.navigate()功能会产生推入效果（新屏幕来自右侧），而不是返回（新屏幕来自左侧）。

然后我尝试使用navigation.replace()和navigation.reset()

navigation.reset({
  index: 0,
  routes: [{ name: 'Tab', state: { routes: [{ name: 'Home' }, { name: 'Personal' }] } }],
})

导航器似乎无法处理这条路线（我认为这是因为我们现在处于Main堆栈中，并且它无法处理参数）。

我该如何纠正导航行为？

Answer 1

导航器似乎无法处理这条路线（我认为这是因为我们现在在Main堆栈中，并且它无法处理参数）。

也许与navigate不同，在这种情况下，navigation在使用replace和reset时无法处理此路由，因此我尝试使用其父导航器，它只是正是我想要的行为！


const onBackButtonPress = useCallback(() => {
  if (navigation.canGoBack()) {
    navigation.goBack()
  } else {
    const parentNaigator = navigation.dangerouslyGetParent()
    parentNaigator?.replace('Tab', { screen: 'Home' })
  }
), [navigation])

根据official document，导航动作旨在由当前导航器处理，如果无法处理，则会冒出气泡。也许是replace和reset的错误。

如何在react-navigation v5中使用深层链接时导航到另一个堆栈的屏幕？

1 个答案: