为什么在将 react-native 上的背景颜色更改为透明时屏幕不可单击?

Question

我有一个代码，它会弹出并关闭带有一点动画的弹出窗口。当我在弹出窗口的背景中添加颜色时，就会出现问题。因为当弹出窗口关闭并且背景颜色已更改时，无法单击屏幕。

我想过删除背景，但我不知道该怎么做。我认为将背景颜色设置为透明将解决我的问题。但它只会删除以前的颜色并使屏幕不可点击。

以前我尝试使用 if else 关闭背景，但应用程序上的动画甚至不再起作用。

这是我附加的代码：

import React, { useState, useRef } from 'react';
import { Text, View, TouchableHighlight, TouchableWithoutFeedback, Animated, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
const testScreen = () => {
const windowHeight = Dimensions.get('window').height;
const bounceValue = useRef(new Animated.Value(windowHeight)).current;
const [reportBackgroundColor, setReportBackgroundColor] = useState("");
const _toggleSubviewAppear = () => {
var toValue = 0;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
setReportBackgroundColor("rgba(0, 0, 0, 0.2)");
};
const _toggleSubviewDisappear = () => {
var toValue = windowHeight;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
};
console.log(JSON.stringify(reportBackgroundColor));
return (
<View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}>
<TouchableHighlight onPress={() => {
_toggleSubviewAppear();
}}>
<View style={{borderRadius: 100, height: 50, width: 50, backgroundColor: 'pink', justifyContent: 'center', alignItems: "center"}}>
<Text>
Click to show
</Text>
</View>
</TouchableHighlight>
<View style={{ backgroundColor: reportBackgroundColor, flex: 1, top: 0, bottom: 0, right: 0, left: 0, position: 'absolute' }}>
<Animated.View style={{ transform: [{ translateY: bounceValue }], flex: 1, zIndex: 1000, position: 'absolute', bottom: 0, left: 0, right: 0 }} >
<KeyboardAvoidingView style={{ flex: 1 }}>
<View style={{ borderColor: "#E0E0E0", borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, backgroundColor: 'white' }}>
<ScrollView showsVerticalScrollIndicator={false}>
<TouchableWithoutFeedback onPress={() => {
_toggleSubviewDisappear();
setReportBackgroundColor("transparent");
}}>
<View style={{ position: 'absolute', right: 27, top: 27, justifyContent: 'center', alignItems: 'center', borderRadius: 100, backgroundColor: 'white', borderWidth: 1, borderColor: '#E0E0E0', height: 29, width: 29 }}>
<Text>
X
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={{ marginTop: 27, alignSelf: "center", fontSize: 19, color: "#333333" }}>Laporkan Penjual</Text>
<View style={{ marginBottom: 25 }}></View>
</ScrollView>
</View>
</KeyboardAvoidingView>
</Animated.View>
</View>
</View>
)
}

Answer 1

您正在更改Animated parent view's背景颜色，尽管将其更改为透明，但它仍然存在，因此无法单击底部视图，您是否有魔杖更改背景颜色？似乎必须改变这个？backgroundColor: 'white'然后确认动画视图真正关闭，并且按钮应该是可单击的。