在 Animated.View 中反應 Native ScrollView 以制作類似 Bumble 的滑動系統

Question

我目前正在開發一個類似 Bumble 的滑動系統，因此我可以水平滑動（感謝 Animated.View 和 PanResponder，這樣我就可以將視圖移動到任何我想要的位置）和垂直滑動（因為我的視圖比我的屏幕）。

經過一整天的搜索，我終於找到了一個解決方案，可以知道用戶是在 PanResponder 中水平滾動還是垂直滾動，然后選擇是否阻止移動

問題是我的 canMove() 函數的 console.log 每次都打印 null 所以目前只有我的垂直滾動工作。 否則，當我在 onPanResponderMove 中打印我的 scrollType 值時，它會發生很好的變化，所以我不明白為什么我的 canMove() function 得到 null

這是我的文件，所以你可以理解：

  const story = useSelector((state) => state.entities.stories[storyId]);
  const pan = useRef(new Animated.ValueXY(null, { useNativeDriver: true })).current;
  const scrollType = useRef(null);

  const checkSwipeDirection = (gestureState) => {
    if (
      (Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3))
      && (Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 3))
    ) {
      scrollType.current = 'horizontal';
    } else {
      scrollType.current = 'vertical';
    }
  };
  const canMove = () => {
    console.log('scrollType.current: ', scrollType.current);
    if (scrollType.current === 'horizontal') {
      return true;
    }
    return false;
  };

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: canMove,
      onPanResponderGrant: () => {
        pan.setValue({ x: 0, y: 0 });
      },
      onPanResponderMove: (evt, gestureState) => {
        if (!scrollType.current) {
          checkSwipeDirection(gestureState);
        }
        return Animated.event(
          [null, { dx: pan.x, dy: pan.y }],
          { useNativeDriver: false },
        );
      },
      onPanResponderRelease: () => {
        Animated.spring(pan, {
          toValue: 0,
          useNativeDriver: false,
        }).start();
        scrollType.current = null;
      },
    }),
  ).current;

  return (
    <Animated.ScrollView
      {...panResponder.panHandlers}
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y },
          {
            rotate: pan.x.interpolate({
              inputRange: [-200, 0, 200], outputRange: ['-20deg', '0deg', '20deg'],
            }),
          }],
      }}
    >
      <TouchableOpacity activeOpacity={1} style={styles.card}>
        <DiscoverCardHeader userId={story.recipient} />
        <DiscoverStory
          storyId={storyId}
          navigation={navigation}
          recipientId={story.recipient}
          authorId={story.author}
        />
      </TouchableOpacity>
    </Animated.ScrollView>
  );
};

如果您需要更多信息，我可以給您。 希望我們能找到解決辦法！ 謝謝

Answer 1

試試這個，新手 <3

const pan = useRef(new Animated.ValueXY(null, {useNativeDriver: true})).current;
var [direction, setDirection] = useState(0)

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onPanResponderGrant: (evt, gestureState) => {
        setDirection(0)
        pan.setValue({x: 0, y: 0});
    },
    onPanResponderMove: (evt, gestureState) => {
        if ((direction === 0 || direction === 1) &&
            (gestureState.dy > 20 || gestureState.dy < -20)) {
            setDirection(1)
            pan.setValue({x: 0, y: 0});
        } else if ((direction === 0 || direction === 2) &&
            (gestureState.dx > 20 || gestureState.dx < -20)) {
            setDirection(2)
            pan.setValue({x: gestureState.dx, y: 0});
        }
    },
    onPanResponderRelease: () => {
        setDirection(0)
        pan.setValue({x: 0, y: 0});
    },
})


const translate = {
    transform: [
        ...[pan.getTranslateTransform()[0]]
    ]
}


return (
    <Animated.ScrollView scrollEnabled={direction !== 2} >
        <Animated.View
            {...panResponder.panHandlers}
            style={[translate]}
        >
            <View style={{
                backgroundColor: "red",
                marginTop: 100
            }}>
                <View>
                    <Text> Coucou</Text>
                    <Text style={{
                        marginTop: 1000
                    }}> Coucou juyin le chien</Text>
                </View>
            </View>
        </Animated.View>
    </Animated.ScrollView>
);