本文共 2833 字，大约阅读时间需要 9 分钟。

废话

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

分析问题

经过观察发现，在onPress事件执行后会触发navigation.navigate(...)方法，加载新的页面。

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

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

解决方案

既然源码未加控制，我们就手动加上，目前思路有2种

普通版

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

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

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

   
     this.repeatClick(this.props.navigation)}>    
    
     goto detail page
    
   ...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
   
    (  navigation: NavigationProp
    ): NavigationScreenProp {  /*  ------------此处为添加的代码--------- */  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事件无需再加控制

   
     this.props.navigation.navigate('Detail')}>    
    
     goto detail page
    
   

1. 看效果
   

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

地址：，欢迎访问

本文结束，欢迎大家加群共同学习

QQ群：672509442