React Native Flatlist 动画视图滚动问题

Question

我试图“更改”React Native 中 Flatlist 的默认刷新指示器。我考虑过使用 Snapchat 或 Instagram 或默认的 IOS 刷新指示器，而不是丑陋的 Android 指示器。现在我尝试了以下操作：

const screenHeight = Dimensions.get("screen").height;
const lockWidth = screenHeight;
const finalPosition = lockWidth;

const pan = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
  const translateBtn = pan.y.interpolate({
    inputRange: [0, finalPosition / 0.75],
    outputRange: [0, finalPosition / 2],
    extrapolate: 'clamp',
  });
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {},
      onPanResponderMove: Animated.event([null, {dy: pan.y}], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: (e, g) => {
        if (g.vy > 2 || g.dy > lockWidth / 2) {
          unlock();
        } else {
          reset();
        }
      },
      onPanResponderTerminate: () => reset(),
    }),
  ).current;
  const reset = () => {
    setGeneralState(prevState => ({...prevState, scroll: true}))
    Animated.spring(pan, {
      toValue: {x: 0, y: 0},
      useNativeDriver: true,
      bounciness: 0,
    }).start();
  };
  const unlock = () => {
    setLoading(true)
    Animated.spring(pan, {
      toValue: {x: 0, y: 280},
      useNativeDriver: true,
      bounciness: 0,
    }).start();
    // alert("")
    setTimeout(() => {
      reset();
      setLoading(false)
    }, 1000)
  };

一切如我所愿：

现在的问题：当 Flatlist 大到可以滚动时（如果有很多项目）我无法再下拉刷新，因为 React Native 总是在我滚动时尝试移动 flatlist。

平面列表：

<Animated.View
        style={[
          styles.receiverBox,
          {transform: [{translateY: translateBtn}]},
        ]}
        {...panResponder.panHandlers}>
          <View>
            <FlatList
              data={["user1", "user2", "user3", "user4", "user5",]}
              renderItem={({item}) => {
                return(
                  <View style={{backgroundColor: colors.background, padding: 20, marginTop: -5, width: "100%",}}>
                    <Text style={{fontSize: Title1, color: colors.text, textAlign: "center",}}>{item}</Text>
                  </View>
                )
              }}
            />
          </View>
      </Animated.View>

Answer 1

发现这可能是 react native 或 flatlist 与 pan responder 组合的问题。

React Native Flatlist 动画视图滚动问题

React Native Flatlist Animated View Scrolling Problem

javascript

reactjs

react-native

react-native-flatlist