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)
  };

它按我的預期工作：

現在的問題是：當平面列表大到可以滾動時（如果有很多項目），我不能再下拉刷新，因為 React Native 總是在我滾動時嘗試移動平面列表。

平面列表：

<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 響應器組合的問題。