Question

我正在尝试显示一个简单的叠加层，但仅限于某些组件。

示例代码：

<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>

如上所述，我需要Overlay上方的一些组件以及其他组件。

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

我该如何解决？ zIndex没有按照我想要的方式工作。

Answer 1

您可以通过以下方式添加position: '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>

以下是样品小吃demo

反应原生 - 仅覆盖某些组件

1 个答案: