onPanResponderMove 执行 setNativeProps 所带来的性能问题



  • 0_1537853568919_9DE95EFB-8A4E-44BC-9926-AF0609497469.png

    如果有哪位大神实现过,还希望提供一下源码,如果通过 Animated.View 来驱动动画,会导致列表的滚动,一脸懵逼



  • @15826954460 改问题已解决,打扰各位啦



  • 大神有没有遇到过移动手势和TouchableOpacity点击事件冲突啊,只要监听了onPanResponderMove就会导致TouchableOpacity点击很难点击



  • @wisejin
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

    <View style={styles.container}
    {...this._panResponder.panHandlers}>
    <View
    ref={(circle) => {
    this.circle = circle;
    }}
    onPress={() => {
    // 事件
    }}
    style={styles.circle}
    />
    </View>
    上面四种事件返回的 事件劫持表示继续向后执行(会导致里面的点击事件不执行,就是你说的冲突),当你返回 false 的时候,手势事件里面的 单机事件就可以执行
    所以你需要判断 是否准备执行 手势事件,最好通过 dy 给个 1 到 5 像素的距离来判断一下在 onMoveShouldSetPanResponderCapture
    eg:
    onMoveShouldSetPanResponderCapture = (evt, gestureState) => {
    const {dy} = gestureState
    /** 初始化手势事件拦截
    * 返回 true 不允许事件继续向下执,劫持事件
    * 返回 false 允许事件继续向下传递,不劫持事件,可以顺利执行列表里面的点击事件
    * 添加判断条件 endScrollOffsetY <= 0 解决列表没有滚动到顶部会导致下拉刷新的bug
    * */
    if (Math.abs(dy) > 3) {
    if (dy > 0) {
    this.state.dragDirection = 1
    }
    if (dy < 0) {
    this.state.dragDirection = -1
    // this._maskView.setNativeProps({
    // zIndex: -1
    // })
    }
    return true
    } else {
    return false
    }
    }