Question

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

如果我水平滑动，我想查看具有预测其他位置的卡片或页面（应用允许设置更多位置）。

如果我垂直滑动，我想向下滚动并查看有关当前位置的更多信息。

我尝试使用“平移”响应器和“滚动视图”的组合，但它只允许我对水平滑动做出反应。

不确定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>
      );

React Native-可滚动的滑动器

0 个答案: