Question

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

我的示例代码是：

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

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

如何解决此问题？

Answer 1

我认为有几种方法可以做到。也许在导航发生时进行记录，并防止导航多次。

您可能还需要考虑在一段时间之后重置Object rowData[] = new Object[5]; rowData[0] = id; rowData[1] = student_id; rowData[2] = date; rowData[3] = exam; rowData[4] = examNumber; model.addRow(rowData);。

hasNavigated

Answer 2

This react-navigation问题包含对此主题的讨论，其中提出了两个解决方案。

第一种方法是使用去抖动功能，例如 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)
        }
    }
}

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

3 个答案: