1

在这种情况下，可以通过深度链接打开一个屏幕。有一个<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堆栈中，它无法处理参数）。

我能做些什么来纠正导航的行为？

4

1 回答 1

1

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

可能不像navigate，在这种情况下，使用andnavigation时无法处理这条路线，所以我尝试使用它的父导航器，这正是我想要的行为！replacereset


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

根据官方文档，导航动作是由当前的导航器处理的，如果不能处理，就会冒泡。也许这是replaceand的一个错误reset。

于 2020-02-18T10:38:41.713 回答