奇怪的bug , Animated 的动画居然 会执行 onScroll 事件



  • / animate 动画 */
    _animated = (startValue, endValue, duration, handle) => {
    Animated.timing(startValue, {
    toValue: endValue,
    duration: duration,
    useNativeDriver: true
    }).start(() => {
    handle instanceof Function && handle()
    }
    )
    }

    this._animated(this.state.list_translateY, 80, 0, null)

    onScroll = (e) => {
    window.console.log('111111--------onScroll', e.nativeEvent.contentOffset)
    }**

    <View
    style={[Styles.container]}
    onLayout={this._scrollContentLayout}
    >
    <Animated.View
    ref={ref => this._headerRefresh = ref}
    style={[Styles.refresh, {transform: [{translateY: this.state.view_translateY}]}]}
    >
    {enableHeaderRefresh ?
    <HeaderRefresh
    {...this.props}
    enableFooterInfinite={enableFooterInfinite}
    onDrag={this.state.onDrag}
    isDisablePullUpLoading={this._isDisablePullUpLoading}
    getInstance={ins => this._headerRefreshInstance = ins}
    /> : null
    }
    </Animated.View>

        <Animated.View
          {...this._panResponder.panHandlers}
          style={[
            Styles.listStyle,
            {transform: [{translateY: this.state.list_translateY}]}
          ]}
        >
          {
            React.cloneElement(ScrollComponent, {
              ref: ref => {
                this._scrollInstance = ref
              },
              scrollEventThrottle: this.props.scrollEventThrottle || 4,
              contentContainerStyle: this.props.contentContainerStyle || {backgroundColor: '#ffffff'},
              onTouchStart: this.onTouchStart,
              onTouchMove: this.onTouchMove,
              onScroll: this.onScroll,
              onScrollBeginDrag: this.onScrollBeginDrag,
              onScrollEndDrag: this.onScrollEndDrag,
              onMomentumScrollBegin: this.onMomentumScrollBegin,
              onMomentumScrollEnd: this.onMomentumScrollEnd,
              ListFooterComponent: enableFooterInfinite ? _renderFooterInfinite() : null
            }, this.props.children)
          }
        </Animated.View>
    
      </View>
    

    问题描述: 在做 特别复杂的 下拉刷新是遇到一个 奇怪的 bug , 手指释放之后(onPanResponderEnd : 方法内部) 执行 this._animated(this.state.list_translateY, 80, 0, null) 会导致 onScroll 事件的触发,所有下拉情况 scrollEnabled: true 属性都是为 true 的 ,onScroll 事件不仅会执行,而且还是导致 列表向上滚动, 但是在 onPanResponderMove 内部 this.state.list_translateY.setValue(value) 不会执行 onScroll 事件,求大神指导,可以找到的 下拉刷新 都满足不了公司项目的需求, 现在问题主要在 手势事件和 onScroll 事件的冲突上(冲突问题已解决),但是这个和 animated 事件有冲突就让我一脸懵逼


Log in to reply