长按以获取本机反应

时间:2019-12-22 01:16:17

标签: javascript react-native long-press

React Native长按按钮在第一次按下时不会触发。仅在第二次按下时才会触发。

设置:

    const [isOpen, setIsOpen] = useState(false)
    const [animation] = useState(new Animated.Value(0))
    const onPressHandler = () => {
        navigation.navigate('BookingItem', {
            itemId
        })
    }

    const onLongPressHandler = () => {
        const toValue = isOpen ? 1 : 0
        Animated.timing(animation, {
            toValue,
            duration: 200,
        }).start()
        setIsOpen(!isOpen)
    }

按钮:


<TouchableWithoutFeedback
    onPress={onPressHandler}
    onLongPress={onLongPressHandler}
>
    <View style={[styles.button, styles.pay]}>
        <Animated.Text style={[styles.label, labelStyle]}>Pay</Animated.Text>
        <Icon name="keyboard-arrow-right" size={20} color="white" />
    </View>
</TouchableWithoutFeedback>

我已经用TouchableOpacityTouchableWithoutFeedback进行过尝试,但是第一次按时都没有。

1 个答案:

答案 0 :(得分:0)

在我的项目中,在调试模式下,无法正确触发它。如果您要测试它。关闭调试,以测试是否正确触发了调试。

您还可以更改为在Android上使用react-native-gesture-handler。它有一个LongPressGestureHandler

const LongPressButton = () => (
  <LongPressGestureHandler
      onHandlerStateChange={({ nativeEvent }) => {
        if (nativeEvent.state === State.ACTIVE) {
          Alert.alert("I'm being pressed for so long");
        }
      }}
      minDurationMs={800}>
      <View style={styles.box} />
  </LongPressGestureHandler>
);