onScroll 事件和 手势(PanResponder)事件冲突



  • import React, {Component} from "react";
    import {
    StyleSheet,
    Text, ScrollView,
    View, PanResponder
    } from "react-native";

    export default class Test extends Component {

    constructor(props) {
    super(props);
    this.wrapperPanResponder = PanResponder.create({
    onStartShouldSetPanResponder: (e, g) => true,
    onPanResponderGrant: () => {
    console.log(1111, 'GRANTED TO WRAPPER');
    },
    onPanResponderMove: (evt, gestureState) => {
    console.log(111122, 'WRAPPER MOVED');
    }
    });

    this.scollerPanResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, g) => true,
      onPanResponderGrant: () => {
        console.log(1111, 'onPanResponderGrant');
      },
      onPanResponderMove: (evt, gestureState) => {
        console.log(1111, 'onPanResponderMove');
      }
    });
    

    }

    render() {
    return (
    <View style={styles.container}>
    <View
    style={styles.pan_container}
    {...this.wrapperPanResponder.panHandlers}
    />
    <ScrollView
    onScroll={() => console.log(111111, 'scrolled')}
    style={styles.scroll_view}
    {...this.scollerPanResponder.panHandlers}
    >
    <Text style={{fontSize: 96}}>Scroll this</Text>
    <Text style={{fontSize: 96}}>Scroll this</Text>
    <Text style={{fontSize: 96}}>Scroll this</Text>
    <Text style={{fontSize: 96}}>Scroll this</Text>
    <Text style={{fontSize: 96}}>Scroll this</Text>
    </ScrollView>
    </View>
    );
    }
    }
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    pan_container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'blue'
    },
    scroll_view: {
    backgroundColor: 'teal',
    maxHeight: 350
    }
    });

    问题描述:
    在 ScrollView 中进行 滚动的时候,外层的 panHandlers 事件都不能被执行,求大神指点一二,主要用来做自定义 的 下拉刷新,android 手机,默认顶部的时候无法进行下拉刷新,手势事件又被 onscroll 给阻止了, 不知道怎么解决



  • 下拉刷新有refreshcontrol啊
    要更复杂的手势可以尝试 https://github.com/kmagiera/react-native-gesture-handler



  • @晴明 谢谢回复啊,refreshcontrol 满足不了实际需求,我看看您推荐的手势事件,不管可否解决,谢了



  • RN官方RefreshControl满足不了要求,推荐自定义下拉刷新库react-native-SmartRefreshLayout



  • @2534290808 这个是你写的? demo 都运行不起来,不知道你是怎么操作的


Log in to reply