【发布时间】：2021-06-09 01:50:56
【问题描述】：
我尝试实现如下水平和垂直滚动：
水平滚动将特色内容显示为图像（应该是可点击的）。垂直滚动还有其他可点击的项目。
我的第一次尝试是使用两个具有绝对位置的 ScrollView，但水平 ScrollView 会消耗所有触摸事件（即使在添加了 pointerEvents={"box-none"} 之后）。
这就是我在那种情况下尝试过的：
import React, { Component } from "react";
import { Dimensions, ScrollView, Text, StyleSheet, View } from "react-native";
const DimensionsWindowWidth = Dimensions.get("window").width;
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView horizontal={true} style={styles.scrollView}>
<View style={styles.slide}>
<Text>H1</Text>
</View>
<View style={styles.slide}>
<Text>H2</Text>
</View>
<View style={styles.slide}>
<Text>H3</Text>
</View>
</ScrollView>
<ScrollView pointerEvents={"box-none"} style={styles.scrollView}>
<View style={styles.item}>
<Text>V1</Text>
</View>
<View style={styles.item}>
<Text>V2</Text>
</View>
<View style={styles.item}>
<Text>V3</Text>
</View>
<View style={styles.item}>
<Text>V4</Text>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
slide: {
padding: 100,
width: DimensionsWindowWidth,
height: "100%"
},
scrollView: {
position: "absolute",
width: "100%",
height: "100%"
},
item: {
margin: 40,
height: 100
}
});
（也可以当零食：https://snack.expo.io/Hyb7x-qQQ）
我的第二次尝试是使用 PanResponder 并在 onPanResponderMove 方法中使用 ScrollViews scrollTo 方法。但似乎我必须自己实现所有特殊的 ScrollView，例如平滑滚动和反弹。
有什么想法可以解决这个问题，同时让水平背景和垂直滚动的项目都可点击？
【问题讨论】：
-
你在哪里可以用纯 JS 做到这一点？
标签： react-native