React native react native-仅覆盖在某些组件上方

我试图显示一个简单的覆盖，但只覆盖某些组件

示例代码：

<Animated.View style={{ flex: 1 }}>
    <Text style={ [{zIndex: 0}, styles.titleText] }>Title under overlay</Text>
    <Animated.View style={ [styles.overlay] } />
    <View style={{ zIndex: 2, flex: 1, justifyContent: 'center' }}>
        <Text style={{ zIndex: 2, fontSize: 32, fontWeight: 'bold', color: '#ffffff', textAlign: 'center' }}>Subtitle above overlay</Text>
        <Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text under overlay</Text>
        <Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text above overlay</Text>
    </View>
</Animated.View>

叠加标题
覆盖上方的副标题
覆盖下的文本
覆盖上方的文本

如前所述，我需要覆盖层上方的一些组件，以及覆盖层下方的其他组件

现在，在覆盖视图之后用代码编写的所有组件都位于覆盖视图之上。我特别希望说“覆盖下的文本”的组件在覆盖下，但其他文本应该在上面

---

我该怎么做呢？zIndex没有按我希望的方式工作。

您可以通过以下方式组合

位置：'absolute'

和

zIndex

来添加覆盖

<View style={styles.container}>
      <View style={{position: 'absolute', backgroundColor: 'transparent', top: 0, bottom: 0, right: 0, left: 0, zIndex: 0}} /> //... Here is the overlay
      <View style={{backgroundColor: 'red', position: 'absolute', top: 0,  bottom:  200, right: 0, left: 0, zIndex: 1}} >
                // Set the elements over the overlay here
      </View>
      <View style={{backgroundColor: 'blue',  position: 'absolute', top: 0,  bottom:  100, right: 0, left: 0, zIndex: -1}} >
                // Set the elements under the overlay here
      </View>
</View>

//... 这是覆盖图
//在此处设置覆盖上的元素
//在此处设置覆盖下的元素

---

这是小吃样本

您也试过在覆盖层上设置zIndex吗？