3

假设我有这个屏幕：

截屏

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

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

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

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

“点击工具提示”部分：

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

我的屏幕：

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

4 回答 4

6

已经报告了多个导航的问题，这里有更多详细信息。

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

选项

  • 导航开始后禁用按钮
  • onPress如果您使用的是 redux，则在逻辑或操作中去抖动

如果您正在寻找一个，lodash提供了一个有用的去抖动实用程序。

于 2017-03-26T20:32:02.450 回答
4

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

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

this.props.navigation.navigate({ key: 'AnotherScreen', routeName: 'AnotherScreen', params: { ... }})}
于 2018-03-14T12:13:09.863 回答
0

在 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

于 2019-01-11T15:24:28.117 回答
0

保存是否打开以控制导航

  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)}>
于 2018-06-30T20:28:21.243 回答