Реагируй на навигацию, предотвращай двойной пу sh ()

Question

Я создаю приложение с Reaction-Navigation-4.2.1. Приложение имеет несколько стековых навигаторов. Так что есть много navigation.push('Routename') звонков. Беда в том, что когда поверхность управления (т.е. TouchableOpacity) быстро нажимается несколько раз (первый, а остальное во время перехода экрана), я заканчиваю тем, что толкаю несколько экранов в стек. Есть ли способ ограничить поверхность первым касанием / вызовом pu sh ()?

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