React Native Pan Responder 被另一个组件重叠

时间:2021-05-10 08:39:25

标签: javascript reactjs react-native react-native-web panresponder

我是 React Native 的新手,即使经过大量研究,我也无法解决这个问题。

我正在尝试使用 react natives pan responder Pan responder library 记录触摸屏的所有触摸坐标(使用 Expo web 用于移动设备)。但是,我注意到平移响应器无法识别对按钮等组件的点击。所有其他触摸都由平移响应器记录。

我该怎么做才能让 Pan Responder 记录屏幕上的每次点击并调用相应的按钮功能?

代码:

import React, { Component } from "react";
import { View, PanResponder, Text, Button } from "react-native";

export default class App extends Component {
    panResponder = PanResponder.create({

        onStartShouldSetPanResponder: (evt, gestureState) => {
            console.log("clicked coord (x|y):", evt.nativeEvent.pageX, evt.nativeEvent.pageY)

        },

        onStartShouldSetPanResponderCapture: (evt, gestureState) => () => { },
        onPanResponderGrant: (evt, gestureState) => { },
        onPanResponderRelease: (evt, gestureState) => { },

    })

    render() {
        return (
            <View style={{ flex: 1 }}{...this.panResponder.panHandlers}>
                <Text>this works (pan responder gets called)</Text>

                <View>
                    <Button onPress={() => { console.log("button pressed") }} title="this not (pan responder doesn't recognize btn clicks)" />
                </View>
            </View >
        );
    }
}

0 个答案:

没有答案