react-native中视图之间的z顺序问题

Question

注意：我正在寻找适用于 android 的解决方案。

我有以下层次结构：

Main App:
     <View>
          <View>
              <Button title="Click Me!" />
          </View>

          <MyCustomElement />
     </View>

MyCustomElement:

     //overlay
     <View style={
                  height: '100%',
                  width: '100%',
                  backgroundColor: 'rgba(0, 0, 0, 0.25)',
                  position: 'absolute',
                  top: '100%',
                  left: 0,
                  alignItems: 'center',
                 }
      >
        //content
        <View style={
                      height: 100,
                      width: 100,
                      backgroundColor: 'red',
                    } 
        />

      </View>

以下是得到的结果：

我用谷歌搜索了一下，发现要改变视图的 z 顺序，我可以使用高度，但是它会产生这种伪影（屏幕边缘的阴影，因为我的覆盖颜色是透明的）：

最后，我什至尝试只更改红色孩子的高度值，但它会产生如第一个屏幕截图所示的结果。

我期待第二次的输出没有阴影。

Answer 1

先渲染你的MyCustomElement怎么样：

主应用：

<View>
    <MyCustomElement />
    <View>
        <Button title="Click Me!" />
    </View>
</View>