React Navigation：防止多个实例导航到同一屏幕

Question

假设我有这个屏幕：

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

我得到的结果是我的 StackNavigator 中有两个新屏幕实例。我的意思是我看到了我的新屏幕，但是当我点击 "Back" 时，我没有 return 到这个 'Hitchhiking Map' 屏幕，而是到同一个屏幕的另一个实例。

如果我在这 2 秒内点击标注 5 次，那么我需要点击 5 次 "Back" 到 return 到地图屏幕。有什么办法可以防止吗？只将一个实例放入 StackNavigator？

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

"click on tooltip"部分：

<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 提供了一个有用的去抖动实用程序，如果您正在寻找的话。

Answer 2

有很多方法可以克服双重导航。

我的解决方案是在导航对象中添加 key 属性：

this.props.navigation.navigate({ key: 'AnotherScreen', routeName: 'AnotherScreen', params: { ... }})}

Answer 3

打开控制导航就保存

  constructor (props) {
    super(props)
    this.state = {
      opening: false
    }
  }

创建一个函数来控制导航

  _open (campaign) {
    if (!this.state.opening) {
      this.props.navigation.navigate('Campaign', {campaign})
      this.setState({ opening: true })
      setTimeout(() => {
        this.setState({ opening: false })
      }, 1000)
    }
  }

从您的 onpress

调用此函数

<TouchableHighlight underlayColor='transparent' onPress={this._open.bind(this, campaign)}>

Answer 4

在 React Navigation 的 1.x 版本中，如果您指定一个标识符，导航操作将只执行一次。例如：

navigate({ routeName: 'someScreen', key: 'someScreen', params: { someParam: 'someValue' } })

更多信息：https://gist.github.com/vonovak/ef72f5efe1d36742de8968ff6a708985

在版本 2.x 和 3.x 中，这是默认功能。

更多信息：https://reactnavigation.org/docs/en/navigation-key.html

React Navigation：防止多个实例导航到同一屏幕

React Navigation: Prevent multiple instances to navigate to same screen

react-native

react-navigation