我正在编写一个天气预报应用程序,需要一个可以在水平和垂直滑动上做出不同反应的组件 .
如果我水平滑动,我想查看带有其他位置预测的卡片或页面(应用程序允许设置更多位置) .
如果我垂直滑动,我想向下滚动并查看当前位置的更多信息 .
我曾尝试使用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>
);