时间戳

首页 > 解决方案 > react native - 仅覆盖在某些组件之上

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>

如前所述，我需要 Overlay 上面的一些组件和它下面的其他组件。

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

我该怎么做？zIndex 没有按照我想要的方式工作。

标签： react-native

解决方案

您可以通过以下方式组合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>

这是样品小吃演示

推荐阅读