滚动视图后面的可触摸处理程序

Question

我想制作某种可滚动的Paralax效果，其中ScrollView设置为flex：1，在它后面有一个绝对定位的元素，它有一些按钮。ScrollView 有一个视图，该视图充当填充以使绝对视图可见。当滚动其余内容时，滚动视图会根据需要越过绝对视图。问题是绝对视图不响应触摸事件，因为它被 ScrollView 覆盖。对此我有什么解决方案？

这是我现在拥有的代码：

<View style={[styles.container, { backgroundColor: "red" }]}>
<Animated.View
style={[styles.static, { backgroundColor: "yellow" }]}
onLayout={this.onLayout}
>
<Header navigation={this.props.navigation} name={name} />
<Balance balance={balance} />
<BotonesAccion navigation={this.props.navigation} />
</Animated.View>
<Animated.ScrollView
style={styles.container}
onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: this.y } } }
])}
>
<View
style={{
height: this.state.height,
backgroundColor: "green",
opacity: 0.2
}}
/>
<Historial navigation={this.props.navigation} />
</Animated.ScrollView>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
static: {
position: "absolute",
top: 0,
width,
paddingTop: Constants.statusBarHeight + theme.sizes.padding,
padding: theme.sizes.padding
},
});

然后我想使用 ScrollView 的 nativeEvent 来驱动一些动画，但这不是问题的一部分。

Answer 1

你应该使用pointerEvents="box-none"(https://facebook.github.io/react-native/docs/view.html#pointerevents(作为ScrollView的道具

<Animated.ScrollView
pointerEvents="box-none"
style={styles.container}
onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: this.y } } }
])}
>
<View>
[...]
</View>
</Animated.ScrollView>