Question

这应该很容易实现，但是我尝试了很多事情，但还是没有成功。

我有一个简单的“底部标签导航器”（堆栈），其中谁嵌套了屏幕。我有一个带有按钮的组件，该按钮通向共享元素转换的第二个屏幕。在第二个屏幕上时，我希望底部的选项卡按钮将我直接带到堆栈的底部。

到目前为止我所拥有的：

const copyToClipboard = (arg) => {
  navigator.clipboard.writeText(arg)
}

export {copyToClipboard}

令人失望的是，底部选项卡按钮没有选项（如果已堆叠）会弹出到顶部堆叠屏幕。然后我们从丑陋的preventDefault hacks开始。

如您在上面的代码中看到的，我解释了什么不起作用。有人会认为我可以得到当前正在使用的堆叠屏幕，如果它是最下面的屏幕，请避免使用<BottomTab.Navigator> <BottomTab.Screen ... listeners={({ navigation }) => ({ tabPress: (e) => { e.preventDefault(); //=> navigation.navigate('Search', { screen: 'Search' }); This works but the shared element transition gets jumpy //=> navigation.popToTop(); This works but the next time you click it, it fails because there is no screen in the stack to pop up to. }, })} />，但可惜的是，没有合适的方法来获得它。 I tried this，但出现错误。

有什么建议吗？

Answer 1

您可以使用unmountOnBlur。对于我而言，它不起作用，因为我不是通过实际按下标签图标来在标签之间导航，但这可能正是您要查找的。

 <BottomTab.Navigator>
   <BottomTab.Screen
        ...
        options={{ unmountOnBlur: true }}
      />

反应本机导航在底部选项卡上单击堆栈顶部

1 个答案: