react-native - ScrollView 后面的 Touchable Handler
问题描述
我想做某种可滚动的视差效果,其中一个 ScrollView 设置为 flex: 1,在它后面有一个绝对定位的元素,它有一些按钮。ScrollView 有一个视图,它充当填充以使绝对视图可见。当滚动其余内容时,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 来驱动一些动画,但这不是问题的一部分。
解决方案
你应该使用 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>
推荐阅读
- automapper - 带有 AutoMapper 的 EF Core
- discord - 改进不和谐的 MassDM 机器人
- java - Aws Kinesis 消费消息反应式
- scipy - 直接将文件读取为 SciPy 稀疏矩阵
- javascript - 标准化 new Date().toLocaleString()
- html - Is there a way to have one single form HTML element that can send information to numerous URL's?
- typescript - Vuetify - 在 v-data-table 中,我想使用 tbody 并在每一行中添加其他组件
- c++ - 多维多图可以吗?
- javascript - 为什么 onclick 仅在您单击两次时才有效?
- c# - 问题放弃对控制的关注