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

Question

当按我的React Antive App上的任何按钮多次导航到另一个屏幕时，它将多次重定向到下一个屏幕。

我的示例代码是：

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

我正在使用 react-navigation浏览我的应用程序。

我该如何修复此行为？

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

这个反应 - 循环问题包含了有关此主题的讨论，提出了两个解决方案。

第一个是使用诸如 lodash 的debounce之类的辩论功能，该功能将阻止在给定时间内导航不止一次。

我使用的第二种方法是检查导航操作，是否试图用相同的参数导航到相同的路线，如果是这样。

但是，仅当您自己处理导航状态时，才能使用第二种方法，例如使用 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>
    );
 }
}

另一个：将OnPress功能包装到具有类似行为的包装器中

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