繁体   English   中英

在 Animated.View 中反应 Native ScrollView 以制作类似 Bumble 的滑动系统

React Native ScrollView inside an Animated.View to make Bumble-like swipe system

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我目前正在研究类似 Bumble 的滑动系统,因此我可以水平滑动(感谢 Animated.View 和 PanResponder,因此我可以将视图移动到我想要的任何位置)和垂直(因为我的视图长于我的屏幕)。

经过一整天的搜索,我终于找到了一个解决方案,可以知道用户是在 PanResponder 中水平还是垂直滚动,然后选择是否阻止移动

问题是我的 canMove() 函数的 console.log 每次都打印 null,所以目前只有我的垂直滚动在工作。 否则,当我在 onPanResponderMove 中打印我的 scrollType 值时,它的变化很好,所以我不明白为什么我的 canMove() 函数为空

这是我的文件,所以你可以理解:

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

如果您需要更多信息,我会随时为您提供。 希望我们能找到解决办法! 谢谢

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>
);
1 为什么 Animated.View 里面的 ScrollView 不起作用?

我想在这里提问,我已经使用平移响应器制作了可拖动视图。 我设法让它只能上下移动。 这是我的平移响应器配置 我在animated.view中使用它,这是代码 我的问题是,当我将 ScrollView 作为该组件的子项时,滚动视图不会滚动。 我不知道为什么会这样,谢谢。 ...

2 为什么此Animated.View没有动画?

我正在尝试设置Animated.View的宽度的Animated.View 。 这是组件的constructor : 这是componentDidMount钩子: 这是render方法: 组件没有进行动画处理,而是跳到了最后一个值。 请帮忙,我真的不知道该怎么 ...

3 PanResponder 不适用于 react_native 中的 Animated.View 变换

在 react-native 包中使用 PanResponder 和 Animated 时遇到问题。 我想要实现的动画是当用户在顶部方向滑动他的手指时,底部栏应该平滑地向下滑动直到它消失。 问题是当我向上滑动时,什么也没有发生,杆卡在它的位置上。 有人可以检查我的代码并告诉我出了什么问题吗? 这是 ...

5 react-native:onPanMove期间Animated.View的动画位置

我已经设置了动画并希望为View设置动画,因此当用户触摸移动时,View沿y轴移动。 我试图用Animated.event进行设置,但是它不起作用。 有人可以解释Animated.event在panResponder中如何工作吗? 这就是我所拥有的: 但是什么也没发生。 ...

6 如何在使用 Animated.View 的本机反应中为扩展/折叠文本预览设置动画

我正在创建一个默认为 2 行的文本组件,如果用户点击它,它将扩展到全长,如果用户再次点击它,它将折叠回 2 行。 到目前为止,我的返回函数中有这样的东西: 我的状态变量和 toggleExpansion 函数如下所示: 到目前为止,这可以扩展和折叠,但我不确定如何设置 Animated.t ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM