react-native - React Native - Animated.View 内的可触摸不透明度是背景列表视图的触发事件
问题描述
我有一个带有滚动视图的列表,我正在尝试为其添加过滤器选项。单击过滤器图标时,position:absolute
将在 Animated.View 内显示一个覆盖。我在覆盖视图中有按钮TouchableOpacity
过滤器.js
export default class FilterFade extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: props.visible,
};
};
componentWillMount() {
this._visibility = new Animated.Value(this.props.visible ? 1 : 0);
}
componentWillReceiveProps(nextProps) {
if (nextProps.visible) {
this.setState({ visible: true });
}
Animated.timing(this._visibility, {
toValue: nextProps.visible ? 1 : 0,
duration: 300,
}).start(() => {
this.setState({ visible: nextProps.visible });
});
}
render() {
const { visible, style, children, ...rest } = this.props;
const containerStyle = {
opacity: this._visibility.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}),
transform: [
{
scale: this._visibility.interpolate({
inputRange: [0, 1],
outputRange: [1.1, 1],
}),
},
],
};
const combinedStyle = [containerStyle, style];
return (
<Animated.View style={combinedStyle} {...rest}>
{children}
</Animated.View>
);
}
}
查看.js
<FilterFade visible={this.state.isFilterVisible}>
<View style={styles.filterView}>
<TouchableOpacity onPress={() => this.getFilteedStories}>
<Text style={styles.filterOption}> My Stories </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.getFilteedStories}>
<Text style={styles.filterOption}> All Stories </Text>
</TouchableOpacity>
</View>
</FilterFade>
风格
filterView :{
position: 'absolute',
top: 0,
right: 5,
backgroundColor: #CCC,
width: 150,
paddingTop: 15,
paddingBottom: 15,
zIndex: 999,
},
filterOption: {
color: "#FFF",
fontSize: 15
}
现在,当我在 Filter 中单击 TouchableOpacity Text 时,会在 FadeView 后面的 Listview 中触发单击事件。
有人可以告诉我如何在动画绝对视图中添加新闻事件。
提前致谢。
解决方案
使用来自 'react-native-gesture-handler' 而不是来自 'react-native' 的 TouchableOpacity。
从“react-native-gesture-handler”导入 { TouchableOpacity };
推荐阅读
- linux - 为 linux 服务添加多个用户/组
- google-sheets - 创建 2 个日期范围内出现的前 5 个唯一值(文本)的列表
- jquery - 加载时 Jquery 自动完成
- python - 我不小心删除了 db.sqlite 中的模型表(手动)。我怎样才能重新创建它?
- pyspark - 在 pyspark 中预处理奇怪的数据
- python - 如何删除python列表笼
- linux - suid 在 docker 容器内不被尊重
- javascript - 为什么在javascript中尝试警报时我没有得到输入字段的值?
- vue.js - Vue:刷新页面后找不到404页面
- histogram - Spyder中如何在直方图中直接插入一系列日期对应其每年的收益(股票收益),见附图