React native 如何避免多次导航到其他屏幕

当按下我的React Native应用程序上的任何按钮多次导航到其他屏幕时，它将多次重定向到下一屏幕

我的示例代码是：

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

我正在使用

react导航

浏览我的应用程序

---

如何修复这种行为？

我认为有几种方法可以做到这一点。可能会记录导航发生的时间，并阻止其多次导航

你也可以考虑重置<代码> Has-Access 在一定的时间之后等。

// 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
    }
}

---

我认为有几种方法可以做到这一点。可能会记录导航发生的时间，并阻止其多次导航

你也可以考虑重置<代码> Has-Access 在一定的时间之后等。

// 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
    }
}

react导航问题包含了关于这个主题的讨论，其中提出了两种解决方案

首先，使用去抖动功能，如Lodash的

去抖动

，可防止导航在给定时间内发生多次

第二种方法，也是我使用的方法，是检查导航操作，它是否尝试使用相同的参数导航到相同的路线，如果是，则删除它

然而，第二种方法只能在您自己处理导航状态的情况下进行，例如使用Redux之类的方法

另请参见：.

react导航问题包含关于此主题的讨论，其中提出了两种解决方案

首先，使用去抖动功能，如Lodash的

去抖动

，可防止导航在给定时间内发生多次

第二种方法，也是我使用的方法，是检查导航操作，它是否尝试使用相同的参数导航到相同的路线，如果是，则删除它

然而，第二种方法只能在您自己处理导航状态的情况下进行，例如使用Redux之类的方法

---

另请参见：。

解决方案之一是自定义组件，在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>
    );
 }
}

---

其中一种解决方案是自定义组件，可在onPress中添加去Bounce：

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>
    );
 }
}

---

你不能禁用点击按钮吗？请不要给你的问题添加不必要的混乱，比如“希望你们做得好”。为什么。？？有什么问题吗？@SwapnilPanchal的问题应该尽可能清晰简洁。尽量避免使用不必要的短语，因为这些短语不会给读者提供任何信息。好吧好吧@David Stocker Thank你不是在点击时禁用按钮吗？请不要在你的问题中添加不必要的混乱，比如“希望你们做得很好”。为什么。？？有什么问题吗？@SwapnilPanchal的问题应该尽可能清晰简洁。尽量避免不必要的短语，因为它们不会给读者提供任何信息。好吧好吧@David Stocker谢谢