React Native Flatlist 动画视图滚动问题答案

【问题标题】：React Native Flatlist Animated View Scrolling ProblemReact Native Flatlist 动画视图滚动问题
【发布时间】：2021-12-28 15:17:21
【问题描述】：

我尝试在 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>

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

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

【讨论】：