我正在尝试始终在屏幕上方显示具有可滚动视图的消息的动画。
在我的FlatList组件中单击onButtonClick
时,效果很好。但是存在一个小问题,因为Animated.View
绝对位置始终位于屏幕顶部,这是因为Flatlist的最顶部元素不可单击。我尝试使用zIndex,似乎没有效果。
如何固定点击以使动画立即生效?
//styles
notification: {
position: 'absolute',
top: 50,
alignSelf: 'center',
zIndex: 100
},
notificationWrapper: {
height: 100,
width: 270,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
marginTop: 40,
marginBottom: 40,
marginLeft: 28,
marginRight: 28,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 28
}
//js
onButtonClick = () => {
this.fadeIn.setValue(0);
Animated.timing(
this.fadeIn,
{
toValue: 1,
duration: 1000,
}
).start(() => {
setTimeout(() => {
this.fadeOut();
}, 2000);
});
}
fadeOut = () => {
this.fadeIn.setValue(1);
Animated.timing(
this.fadeIn,
{
toValue: 0,
duration: 1000,
}
).start();
}
<Fragment>
<ScrollView style={[styles.mainContainer, {flex: 1}]}>
<FlatList
style={{ paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}
data={favouriteData}
keyExtractor={this.keyExtractor}
renderItem={this.rendeCampus}
/>
</ScrollView>
<Animated.View
style={[styles.notification, {opacity: this.fadeIn, zIndex:
this.fadeIn}]}
>
<View style={styles.notificationWrapper}>
<Text style={{
fontSize: 12,
lineHeight: 15,
color: 'rgba(42,36,66,1)',
width: 270
}}>This restaurant has been added to your favourites list</Text>
</View>
</Animated.View>
</Fragment>
答案 0 :(得分:1)
我猜其他所有内容默认为zIndex: 0
尝试使用像这样的插值:
this.zAnimate = this.fadeIn.interpolate({
inputRange: [ 0, 1],
outputRange: [-1, 9]
})
并将this.zAnimate
分配给您的zIndex
。您可能需要稍微玩一下outputRange,具体取决于您希望它何时在后面淡出,出现在前面。
答案 1 :(得分:0)
您可能需要使用transform
推开视图。
例如。
this.fadeIn.setValue(1);
Animated.timing(
this.fadeIn,
{
toValue: 0,
duration: 1000,
}
).start(() => {
this.transform.setValue(-200);
});