手势检测器内的平面列表

Question

此代码创建一个自定义底表，它包含一个平面列表。底板使用手势检测器来水平填充屏幕的动画。我面临的问题是，当手势检测器处于活动状态时，其中的平面列表将变得无法访问。 那么如何在某些条件下禁用手势检测器，以便可以访问其中的平面列表？

const Spot = () => {
  const translateY = useSharedValue(0);
  const context = useSharedValue({ y: 0 });
  const gesture = Gesture.Pan()
    .onStart(() => {
      context.value = { y: translateY.value };
    })
    .onUpdate((event) => {
      translateY.value = event.translationY + context.value.y;
      translateY.value = Math.max(translateY.value, MAX_TRANSLATAE_Y);
    })
    .onEnd(() => {
      if (translateY.value < -deviceHeight / 1.5) {
        translateY.value = withSpring(MAX_TRANSLATAE_Y, { damping: 50 });
      } else {
        translateY.value = withSpring(-deviceHeight / 3, { damping: 50 });
      }
    });

  const rModal = useAnimatedStyle(() => {
    const borderRadius = interpolate(
      translateY.value,
      [MAX_TRANSLATAE_Y + 50, MAX_TRANSLATAE_Y],
      [25, 5],
      Extrapolate.CLAMP
    );
    const width = interpolate(
      translateY.value,
      [MAX_TRANSLATAE_Y + 300, MAX_TRANSLATAE_Y],
      [deviceWidth - 20, deviceWidth],
      Extrapolate.CLAMP
    );
    return {
      borderRadius,
      width,
      transform: [{ translateY: translateY.value }],
    };
  });

  useEffect(() => {
    translateY.value = withSpring(-deviceHeight / 3, { damping: 50 });
    if (data !== null) {
      setIsLoading(false); // Update loading state when data fetching is done

    }
  }, []);
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" color="green" />
      </View>
    );
  }
  return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <GestureDetector gesture={gesture}>
          <Animated.View style={[styles.modal, rModal]}>
            <FlatList
              showsVerticalScrollIndicator={false}
              data={data}
              style={{ flex: 1, marginTop: 20 }}
              renderItem={({ item, index }) => {
                return (
                    <Text>Sample Text</Text>
                );
              }}
            />
          </Animated.View>
        </GestureDetector>
      </View>
  );
};

提供的一种解决方案是将其包装在 GestureHandlerRootView 内，但事实并非如此。

Answer 1

“我通过利用‘react-native-gesture-handler’包中的 FlatList 解决了这个问题。”

Answer 2

使用新的手势 API，执行以下操作。

const panGesture = Gesture.Pan().onUpdate(...);
const nativeGesture = Gesture.Native();
const gesture = Gesture.Simultaneous(panGesture, nativeGesture);

...

<Gesture gesture={gesture}>
  <Animated.FlatList />
</Gesture>