Javascript 为什么将react native上的背景色更改为透明时屏幕不可单击？

我有一个代码，它将弹出并关闭一个小动画弹出窗口。当我给弹出窗口的背景添加颜色时，问题就出现了。因为当弹出窗口关闭且背景颜色改变时，屏幕无法点击

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

以前我尝试使用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>
  )
}

import React，{useState，useRef}来自“React”；
从“react native”导入{文本、视图、可触摸高光、可触摸无反馈、动画、键盘AVOIDGVIEW、维度、滚动视图}；
常量测试屏幕=（）=>{
const windowHeight=Dimensions.get（'window'）.height；
const bounceValue=useRef（新的动画.Value（windowHeight））.current；
const[reportBackgroundColor，setReportBackgroundColor]=useState（“”）；
const_toggleSubviewExample=（）=>{
var-toValue=0；
春天(
反弹值，
{
toValue:toValue，
速度：3，
紧张局势：2，
摩擦：8，
}
).start（）；
setReportBackgroundColor（“rgba（0,0,0,0.2）”）；
};
常量切换子视图消失=（）=>{
var toValue=窗高；
春天(
反弹值，
{
toValue:toValue，
速度：3，
紧张局势：2，
摩擦：8，
}
).start（）；
};
log（JSON.stringify（reportBackgroundColor））；
返回(
{
_切换子视图显示（）；
}}>
点击显示
{
_切换子视图消失（）；
setReportBackgroundColor（“透明”）；
}}>
X
拉波肯·彭胡埃尔
)
}

您正在更改

动画父视图的

背景色，尽管您将其更改为透明，它仍然在那里，因此无法单击底部视图，您是否需要更改背景色？看来要换这个了

backgroundColor:“白色”

，然后确认动画视图确实关闭，按钮应该可以单击。

您正在更改动画父视图的背景色，尽管您将其更改为透明，它仍然在那里，因此无法单击底部视图，你有没有改变背景颜色的魔杖？看来要换这个了

backgroundColor:“白色”

然后确认动画视图确实关闭，按钮应可单击。

我想在屏幕上将背景色更改为透明并可单击。我试着换成“白色”，但是我的屏幕变成了白色，我不能点击任何按钮。我的意思是在第一行视图中改变背景颜色？现在我明白了，也许你可以将

触控而不反馈
内部视图的背景色设置为另一个来查找按钮？然后将背景色更改为透明或白色。然后点击按钮试试。我的意思是，如果你只是透明动画的视图，但它仍然在那里，你不能触摸视图按钮的底部。只有移除上面的视图，它才能工作，但里面的按钮或元素仍然是明亮的颜色。然而，我想让按钮看起来像是被阴影/变暗了，当弹出窗口出现时，这些按钮不起作用。如果你想看到我想要的东西：这是我根据你的建议运行的代码的结果：尝试添加一个状态来控制那些按钮，如果出现将被禁用？（如果弹出窗口出现
disabel=true
）和条件函数addif（disabel！=true）工作。我想在我的屏幕上将背景色更改为透明并可单击。我试着换成“白色”，但是我的屏幕变成了白色，我不能点击任何按钮。我的意思是在第一行视图中改变背景颜色？现在我明白了，也许你可以将
触控而不反馈
内部视图的背景色设置为另一个来查找按钮？然后将背景色更改为透明或白色。然后点击按钮试试。我的意思是，如果你只是透明动画的视图，但它仍然在那里，你不能触摸视图按钮的底部。只有移除上面的视图，它才能工作，但里面的按钮或元素仍然是明亮的颜色。然而，我想让按钮看起来像是被阴影/变暗了，当弹出窗口出现时，这些按钮不起作用。如果你想看到我想要的：这是我根据你的建议运行的代码的结果：尝试添加一个状态来控制那些按钮，如果出现将被禁用？（如果弹出窗口出现
disabel=true
）和条件函数add If（disabel！=true）工作。