0

我正在使用反应导航（"@react-navigation/native": "^5.1.3"）并且我有以下设置：

BottomNavigation
    -stack1
    -stack2

它看起来像是goBack()堆栈本地的。这意味着如果我从 stack1 中的一个页面导航到 stack2 中的一个页面，我将无法转到我上来的页面。

对我不起作用的解决方案（或者更确切地说是 hack）：

  • 将源屏幕作为参数传递，然后导航。这不是一个真正的后退按钮，并且不能很好地与 android 后退按钮一起使用。
  • 将所有页面放在底部导航中。底部导航似乎没有动画，所以我无法实现正确的过渡
  • 将所有页面放在堆栈导航中。在这种情况下，我失去了固定的底部导航。我可以将它添加到每个页面，但是在转换时它会随着旧屏幕消失并再次出现新屏幕，这是不可取的。

所以我想知道我是否在这里遗漏了一些重要的东西，比如globalBack()我忽略的？！

而且，我正在寻找解决这个问题的方法。

4

2 回答 2

0

我也在使用带有 2 个堆栈的底部选项卡导航器。我遇到了类似的问题并同意@Max的解释。由于我的通知屏幕位于堆栈 1 中，我必须在导航到详细信息屏幕后返回通知。搜索修复后，我正在使用此解决方法（适用于 v6）。

Tab 1 - Stack 1 (Home > Notification screen)
Tab 2 - Stack 2 (Reward Home > Reward Detail screen)

从 Notification 导航到 RewardDetail 时，我传递了一个参数。然后我重写headerLeft并使用BackHandler来处理Android返回函数。

通知.js

navigation.navigate('RewardStack', { 
   screen: 'RewardDetail', 
   initial: false, 
   params:{notification: notification_data_source} 
})

奖励细节.js

const payload = route.params.notification

//1. override headerLeft button

useLayoutEffect(() => {
    if(payload)
      navigation.setOptions({
        headerLeft: () => (
          <Button 
            TouchableComponent={TouchableOpacity}
            buttonStyle={{paddingTop:4, paddingLeft:0}}
            type='clear'
            icon={<Icon name={'chevron-left'} size={30} style={{color:'#FFF'}} />}
            onPress={()=>{
              navigation.goBack()
              navigation.navigate('Notification') //can use this only
            }} 
          />
        )
      })
}, [navigation]);

//2. Add BackHandler

useEffect(() => {
    const onBackPress = () => {
      if (payload) {
        navigation.goBack()
        navigation.navigate('Notification') //can use this only
        return true
      } else {
        return false
      }
    }

    BackHandler.addEventListener('hardwareBackPress', onBackPress)

    return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
}, [navigation]);

我可以只使用navigation.navigate('Notification')返回通知，但这将导致详细信息屏幕保持安装在堆栈 2 中。我希望堆栈 2 在返回通知后返回到 RewardHome。因此我使用了：

navigation.goBack() //pop screen to RewardHome
navigation.navigate('Notification') //jump to Notification
于 2021-12-09T02:02:30.963 回答
0

自然，如果您有底部选项卡，每个选项卡都有自己的堆栈导航器，则调用navigation.goBack()将从堆栈导航器内的一个屏幕返回到同一堆栈导航器内的前一个屏幕。这就是导航在几乎每个应用程序中的工作方式。按返回按钮或向后滑动不会为您更改选项卡，选项卡本身更像是单独的小应用程序。如果您想专门从一个选项卡跳转到另一个选项卡而不是返回堆栈，请使用navigation.dispatch(TabActions.jumpTo('Profile')). 如果在 tab#1 中按下某些东西会让你转到 tab#2，那么这个屏幕很可能也属于 tab#1

另外，看看backBehaviorprop of Tab.Navigator，它可能正在做你想做的事，具体取决于你想要什么https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior

于 2020-05-19T19:28:51.070 回答