廢話

• 在[email protected]版本之後，官方廢棄了之前的導航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種
- 普通版 在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的官方文件

本文結束，歡迎大家加群共同學習

QQ群：672509442