他の画面への複数回のナビゲートを回避する方法

Question

React Native Appのいずれかのボタンを押して別の画面に複数回移動すると、次の画面に複数回リダイレクトされます。

私のサンプルコードは次のとおりです。私は私のアプリをナビゲートするreact-navigationを使用しています

// This is my button click event 
    myMethod() 
    { 
     this.props.navigation.navigate("ScreenName") 
    }  

。

この現象を修正するにはどうすればよいですか？

Answer 1

これはいくつかの方法があると思います。おそらく、ナビゲーションが発生したときに記録し、複数回ナビゲートしないようにします。

また、hasNavigatedなどのリセット後も考慮する必要があります。

// Somewhere outside of the myMethod scope 
let hasNavigated = false 

// This is my button click event 
myMethod() 
{ 
    if (!hasNavigated) { 
     this.props.navigation.navigate("ScreenName") 
     hasNavigated = true 
    } 
} 

Answer 2

This反応し、ナビゲーションの問題は、二つの解決策が提案されたこの非常にトピックについての議論が含まれています。

最初に、Lodashのdebounceなどのデバウンス機能を使用して、特定の時間内に複数回ナビゲーションが実行されないようにします。

2番目のアプローチは、同じパラメータで同じルートにナビゲートしようとしているかどうかを確認するナビゲーションアクションを確認し、そうであればドロップします。

しかし、2つ目の方法は、たとえばReduxのようなものを使用して、ナビゲーションの状態を自分で処理する場合にのみ行うことができます。

Redux integrationも参照してください。

Answer 3

解決策の一つが持つカスタムカスタムコンポーネントでは、たonPressにデバウンスを追加します。

class DebounceTouchableOpacity extends Component { 

constructor(props) { 
    super(props); 
    this.debounce = false; 
} 

_onPress =() => { 
    if (typeof this.props.onPress !== "function" || this.debounce) 
     return; 
    this.debounce = true; 

    this.props.onPress(); 


    this.timeoutId = setTimeout(() => { 
     this.debounce = false; 
    }, 2000); 
}; 
componentWillUnmount() { 
     this.timeoutId && clearTimeout(this.timeoutId) 
} 
render() { 
    const {children, onPress, ...rest} = this.props; 

    return (
     <TouchableOpacity {...rest} onPress={this._onPress}> 
      {children} 
     </TouchableOpacity> 
    ); 
} 
} 

別：類似の挙動

const debounceOnPress = (onPress, time) => { 
    let skipCall = false; 

    return (...args) => { 
     if (skipCall) { 
      return 
     } else { 
      skipCall = true; 
      setTimeout(() => { 
       skipCall = false; 
      }, time) 
      onPress(...args) 
     } 
    } 
}