我正在编写一个天气预报应用程序,需要一个可以在水平和垂直滑动上做出不同反应的组件 .

如果我水平滑动,我想查看带有其他位置预测的卡片或页面(应用程序允许设置更多位置) .

如果我垂直滑动,我想向下滚动并查看当前位置的更多信息 .

我曾尝试使用Pan响应器和Scroll View的组合,但它允许我只对水平滑动做出反应 .

我不确定Pan响应者和ScrollView的组合是否是解决这个问题的好方法......你还有其他想法吗?

//卡片组构造器

constructor(props) {
super(props);

const position = new Animated.ValueXY();

const panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (event, gesture) => {
    position.setValue({ x: gesture.dx });
  },
  onPanResponderRelease: (event, gesture) => {
    if (gesture.dx > SWIPE_THRESHOLD) {
      this.forceSwipe('right');
    } else if (gesture.dx < -SWIPE_THRESHOLD) {
      this.forceSwipe('left');
    } else {
      this.resetPosition();
    }
  }
});

this.state = { panResponder, position, index: 0 };}

//在卡片组件中渲染天气卡

return (
        <Animated.View
          key={item.id}
          style={[this.getCardStyle(), styles.cardStyle]}
          {...this.state.panResponder.panHandlers}
        >
          <ScrollView><Text>content...<Text><ScrollView>
        </Animated.View>
      );