react-native - react 导航 : Prevent multiple instances to navigate to same screen

Question

假设我有这个屏幕:



当用户点击白色工具提示时，它会重定向到另一个屏幕。有时应用程序会延迟一点，点击工具提示需要大约 2 秒才能看到屏幕变化。问题是，在这 2 秒内，用户再次点击此工具提示以使其发生。

我得到的结果是我的 StackNavigator 中有两个新屏幕实例。我的意思是我看到了我的新屏幕，但是当我点击“返回”时，我没有返回到这个“搭便车 map ”屏幕，而是返回到同一屏幕的另一个实例。

如果我在这 2 秒内在标注上点击了 5 次，那么我需要点击 5 次“返回”才能返回到 map 屏幕。有什么办法可以防止吗？只将一个实例放入 StackNavigator 中？

我正在使用 React Navigation，更准确地说是 StackNavigator。这是我的代码:

“点击工具提示”部分:

<MapView.Marker
  onCalloutPress={() => this.props.navigation.navigate('spotDetails', { spotId: marker.id })}
/>

我的屏幕:

const HMapNavigator = StackNavigator({
  HMap: { screen: HMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer },
});

Answer 1

多次导航的问题已上报，还有更详细的here .

react-navigation (v1.0.0-beta.7) 处于测试阶段并且仍在构建中，因此在实现此功能之前，您必须手动处理去抖动。

选项

导航开始后禁用按钮

在 onPress 中去抖动如果您使用的是 redux

的逻辑或操作

lodash如果您正在寻找一个有用的 debounce 实用程序。