react-navigation重复点击多次跳转的解决方案

大家好，又见面了，我是你们的朋友全栈君。

废话

• 在react-native@0.44版本之后，官方废弃了之前的导航Navigator，用react-navigation 替代
• react-natvigation于2017年1月份开源，在3个月时间内，GitHub上star数达4000+，备受推崇，由于其性能体验堪比原生，而且使用方便，最后被FB钦点为“御用导航”
• 但是在使用过程中还是发现了一个问题：在触发页面跳转的View上 重复、快速点击时，即将被加载的页面会多次被加载（ 感谢测试小姐姐丧心病狂的操作 ），症状如下图

分析问题

经过观察发现，在onPress事件执行后会触发 navigation.navigate(...) 方法，加载新的页面。 但是当页面加载缓慢时，多余的点击会多次触发该事件，导致页面重复加载 位置：../node_modules/react-navigation/src/addNavigationHelper.js

...... navigate: ( routeName: string, params?: NavigationParams, action?: NavigationNavigateAction ): boolean => navigation.dispatch( NavigationActions.navigate({ routeName, params, action }) ), .....

显然，页面跳转时，并未对事件进行控制，只要触发，就会加载新的页面

解决方案

既然源码未加控制，我们就手动加上，目前思路有2种 – 普通版 在 onPress 事件处控制，第一次点击后，加上延时，禁止之后的点击操作，但是需要每个点击事件都添加 – 进阶版 直接修改源码，给 navigation.dispatch 加延时，一劳永逸

普通版

1. 在 constructor 中初始化一个记录是否等待的 state

constructor(props) { super(props) this.state = { waiting: false,//防止多次重复点击 } }

1. 利用 this.state.waiting 控制 TouchableOpacity 的 disabled 属性

<TouchableOpacity
    disabled={
  this.state.waiting}
    onPress={
  () => this.repeatClick(this.props.navigation)}
    <Text style={
  padding: 10, color: 'red'}}>goto detail page</Text>
</TouchableOpacity>
repeatClick(navigation){
    this.setState({
  waiting: true});
    /*-------这中间写你需要实现的逻辑------------*/
    navigation.navigate('Detail')
    /*-------这中间写你需要实现的逻辑------------*/
    setTimeout(()=> { this.setState({waiting: false}) }, 3000);//设置的时间间隔根据实际需要 }

1. 效果展示

进阶版

1. 修改源码 位于：../node_modules/react-navigation/src/addNavigationHelper.js 此次修改基于 "react-navigation": "^1.0.0-beta.27" ， 修改后的代码如下：

......
......
export default function<S: {}>(
  navigation: NavigationProp<S>
): NavigationScreenProp<S> {
  /* ------------此处为添加的代码--------- */
  let debounce = true;// 定义判断变量 
  /* ------------此处为添加的代码--------- */
  return {
    ...navigation,
    goBack: (key?: ?string): boolean => {
      let actualizedKey: ?string = key;
      if (key === undefined && navigation.state.key) {
        invariant(
          typeof navigation.state.key === 'string',
          'key should be a string'
        actualizedKey = navigation.state.key;
      return navigation.dispatch(
        NavigationActions.back({ key: actualizedKey })
    navigate: (
      routeName: string,
      params?: NavigationParams,
      action?: NavigationNavigateAction
  /* ------------此处为修改后的的代码--------- */
    ): boolean =>{
      if (debounce) {
        debounce = false;
        navigation.dispatch(
          NavigationActions.navigate({
            routeName,
            params,
            action,
        setTimeout(
          () => {
            debounce = true;
          5000,
        return true;
      return false;
  /* ------------此处为修改后的的代码--------- */
......
......

此时onPress事件无需再加控制

<TouchableOpacity  // disabled={this.state.waiting} onPress={() => this.props.navigation.navigate('Detail')} > <Text style={ 
   padding: 10, color: 'red'}}>goto detail page</Text> </T

1. 看效果

本人翻译了 react-navigation的官方文档

地址： https://www.reactnavigation.org.cn/ ，欢迎访问

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139144.html原文链接：https://javaforall.cn