react native 触摸的响应方法以及过程（一）

最新推荐文章于 2024-02-06 16:11:51 发布

原创最新推荐文章于 2024-02-06 16:11:51 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

react native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用React Native中的PanResponder实现触摸手势响应。通过详细示例代码，展示如何配置手势响应逻辑并将其应用于View组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先需要导入PanResponder

import {
PanResponder
} from 'react-native';

2、在组件挂载的时候，注册某一变量称为响应者

componentWillMount: function () {
    this.console("componentWillMount===controlType:" + this.props.controlType + ";connectSTBToken:" + JSON.stringify(this.props.connectSTBToken));
    this._panResponder = PanResponder.create({
        // 要求成为响应者：
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

        onPanResponderGrant: (evt, gestureState) => {
            // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
            // gestureState.{x,y}0 现在会被设置为0
            this.movePos = [];
            this.console("touch start===X:" + gestureState.x0 + "===Y:" + gestureState.y0);
            this.movePos.push(Math.floor(gestureState.x0), Math.floor(gestureState.y0));
        },
        onPanResponderMove: (evt, gestureState) => {
            // 最近一次的移动距离为gestureState.move{X,Y}
            // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
        },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
            // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
            // 一般来说这意味着一个手势操作已经成功完成。
            this.console("touch end===moveX:" + gestureState.moveX + "===moveY:" + gestureState.moveY);
            this.movePos.push(Math.floor(gestureState.moveX), Math.floor(gestureState.moveY));
            this.moveActionEnd(this.movePos);
        },
        onPanResponderTerminate: (evt, gestureState) => {
            // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
            this.console("what???");
        },
        onShouldBlockNativeResponder: (evt, gestureState) => {
            // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
            // 默认返回true。目前暂时只支持android。
            return true;
        }
    });
}

3、定义某个View组件称为手势响应区域

render: function () {
    let keyBoardImg = this.keyBoardImg();
    return (
        <View style={styles.wrap}>
            <View style={[styles.touchContainer, {backgroundColor: '#e2eaea'}]}
                {...this._panResponder.panHandlers}>
                <Animated.Image
                    style={[styles.middleContainer_BG, {opacity: this.bounceValue}]}
                    source={{uri: keyBoardImg}}/>
            </View>
        </View>
    );
}