我有一个PanResponder岁的父母和一个子元素.

这是我的代码:

this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
                return gestureState.dx != 0 && gestureState.dy != 0;
            },
            onPanResponderGrant: (evt, gestureState) => {
                let isFirst = gestureState.y0 > 164 ? false : true;
                this.setState({animObj: isFirst, isUsingCurtain: true});
            },
            onPanResponderMove: (evt, gestureState) => {

                //let Y = this.state.animObj ? gestureState.moveY - this.state.currentHeaderHeight  : gestureState.moveY - this.state.currentHeaderHeight ;// - this.state.currentHeaderHeight;
                let Y = gestureState.moveY - this.state.currentHeaderHeight + 20
                if (Y < 0) {
                    return false
                }
                this.state.animCurtain.setValue(Y);
                gestureState.moveY > height / 2 ? this.setState({curtainOnMiddle: true}) : this.setState({curtainOnMiddle: false})
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                if (((height / 2) > gestureState.moveY)) {//slide back up1
                    this._CurtainAnimation(0, false);
                } else {//slide to bottom
                    let val = height - calcSize(180);
                    this._CurtainAnimation(val, true);
                }
            },
            onPanResponderTerminate: (evt, gestureState) => {
            },
            onPanResponderStart: (e, gestureState) => {
            },
        });

这是我的观点:

<Animated.View
            style={[styles.bottomHPHeader, TopArroOpacity ? {opacity: TopArroOpacity} : ""]} {...this._panResponder.panHandlers}>
            <TouchableOpacity onPress={() => this._animateAutoCurtain()}>
                {this.state.curtainOnMiddle ?
                    <AIIcon image={require('../../../../assets/images/homepage/close_drawer_arrow.png')}
                            boxSize={30}/>
                    : <AIIcon image={require('../../../../assets/images/homepage/open_drawer_arrow.png')}
                              boxSize={30}/>}
            </TouchableOpacity></Animated.View>

非常感谢.

推荐答案

我的 case 的解决方案是修改onMoveShouldSetPanResponder

onMoveShouldSetPanResponder: (evt, gestureState) => {
    //return true if user is swiping, return false if it's a single click
                return !(gestureState.dx === 0 && gestureState.dy === 0)                  
}

React-native相关问答推荐

React Navigation—从标题按钮打开模式

无法解析 com.google.gms:google-services:4.3.15

为什么我的expoav视频不会自动播放?

react native调用fetch后如何使用Async Storage在本地保存数据?

如何在带有decorator 的 react-native 0.56 (Babel 7) 中使用 mobx

你如何在生产模式下运行 react-native 应用程序?

如何实时从 react-native-camera 获取帧

迷失在 Ionic、Cordova 等混合应用程序框架中

因 JVM 堆空间耗尽而导致守护进程到期?

React Native 有全局作用scope域吗?如果没有,我该如何模仿它?

eslint Parsing error: Unexpected token =

No such property: ABI for class: org.gradle.api.tasks.OutputFile

React native Redux - 对象不是构造函数(判断'new ctor(props context)')

自定义标签栏react Navigation 5

如何在 ubuntu 上安装 facebook watchman?

React Native 无法运行堆栈跟踪

react-native如何禁用android开发模式

运行时尚未准备好进行调试

使用 React Native 运行多个 iOS 模拟器?

运行 expo start 时如何禁用在浏览器中打开 DevTools?