反应导航防止双推（）答案

【问题标题】：React navigation prevent double push()反应导航防止双推（）
【发布时间】：2020-03-06 15:24:15
【问题描述】：

我正在使用 react-navigation-4.2.1 构建一个应用程序。该应用程序有多个堆栈导航器。所以有很多navigation.push('Routename') 电话。问题是当控制表面（即 TouchableOpacity）被快速点击多次（第一次，其余在屏幕转换期间）时，我最终将多个屏幕推入堆栈。有没有办法将表面限制为第一次点击/调用 push()？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

下面的组件是我用来使事物可触摸的组件。它可以在短时间内处理多次触摸。

使用下面的组件代替TouchableOpacity。用这个组件包装你想要的任何东西，它就会是可触摸的。

<SafeTouch
    onPress={...}
>
    <Text> hey! im a touchable text now</Text>
</SafeTouch>

下面的组件是用TypeScirpt写的。
第一次触摸后 300 毫秒内的每次触摸都将被忽略（这可以帮助您解决问题）。

import * as React from 'react'
import { TouchableOpacity } from 'react-native'

interface ISafeTouchProps {
    onPress: () => void
    onLongPress?: () => void
    onPressIn?: () => void
    onPressOut?: () => void,
    activeOpacity?: number,
    disabled?: boolean,
    style: any
}

export class SafeTouch extends React.PureComponent<ISafeTouchProps> {
    public static defaultProps: ISafeTouchProps = {
        onPress: () => { },
        onLongPress: () => { },
        onPressIn: () => { },
        onPressOut: () => { },
        disabled: false,
        style: null
    }
    private isTouchValid: boolean = true
    private touchTimeout: any = null
    public constructor(props: ISafeTouchProps) {
        super(props)
        {// Binding methods
            this.onPressEvent = this.onPressEvent.bind(this)
        }
    }
    public render(): JSX.Element {
        return (
            <TouchableOpacity
                onPress={this.onPressEvent}
                onLongPress={this.props.onLongPress}
                onPressIn={this.props.onPressIn}
                onPressOut={this.props.onPressOut}
                activeOpacity={this.props.activeOpacity}
                disabled={this.props.disabled}
                style={[{minWidth: 24, minHeight: 24}, this.props.style]}
            >
                {
                    this.props.children
                }
            </TouchableOpacity>
        )
    }
    public componentWillUnmount() {
        this.clearTimeoutIfExists()
    }
    private onPressEvent(): void {
        requestAnimationFrame(() => {
            if (this.isTouchValid === false) {
                return
            }
            this.isTouchValid = false
            this.clearTimeoutIfExists()
            this.touchTimeout = setTimeout(() => {
                this.isTouchValid = true
            }, 300)
            if (typeof this.props.onPress === 'function') {
                this.props.onPress()
            }
        })
    }
    private clearTimeoutIfExists(): void {
        if (this.touchTimeout != null) {
            clearTimeout(this.touchTimeout)
            this.touchTimeout = null
        }
    }
}

【讨论】：

【解决方案2】：

这是 Push 的正确行为，如果您愿意，这不是错误为了避免双标签上的重复屏幕，您可以使用 navigation.navigate。

【讨论】：