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

Question

我们说我有这个屏幕：

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

我得到的结果是我的StackNavigator中有两个新屏幕实例。我的意思是我看到了我的新屏幕，但是当我点击＆＃34;返回＆＃34;我不会回到这个搭便车地图的地图上。屏幕，但是同一个屏幕的另一个实例。

如果我在这些2s中点击了5次，那么我需要点击5次＆＃34;返回＆＃34;返回地图屏幕。有什么办法可以阻止吗？只将一个实例放入StackNavigator？

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

＆＃34;点击工具提示＆＃34;部分：

<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）处于测试阶段且仍处于测试阶段，因此在实施此功能之前，您必须手动处理去抖动。

选项

• 导航开始后禁用按钮
• 如果您使用redux
，则在onPress逻辑或操作中进行消除

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 版本中，如果您指定标识符，则导航操作将仅执行一次。例如：

db.session.commit()

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

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

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