zIndex 在组件中不起作用

Question

我有一个蓝色标题，我想在另一个视图中使用动画事件参与其中。但在我执行动画功能之前，我手动设置了 zIndexes 并且知道它根本不起作用！！意味着当我为zIndex组件的属性赋予 1 或 100 或其他值时，没有任何变化:(

   <View style={{ flex: 1 }}>
    <Animated.View style={{
      position: 'absolute',
      top: 0,
      left: 0, right: 0,
      backgroundColor: 'lightskyblue',
      height: headerHight,
      zIndex: 1,//Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      alignItems: 'center',
    }}>

      <Animated.View style={{ position: 'absolute', top: titleTop }}>

        <Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>

      </Animated.View>

    </Animated.View>

    <ScrollView style={{ flex: 1 }}
      scrollEventThrottle={16}

      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
      )}>
      <Animated.View style={{
        height: profileImageHight,
        width: profileImageHight,
        borderRadius: PROFILE_IMAGE_MAX_HIGHT / 2,
        borderColor: 'white',
        borderWidth: 3,
        overflow: 'hidden',
        marginTop: profileImageMarginTop,
          zIndex:0, //Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
        marginLeft: 10,

      }}>

        <Image source={require('./assets/avatar.jpg')} style={{ flex: 1, width: null, height: null}} />
      </Animated.View>
      <Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
      <View style={{ height: 1000 }}></View>
    </ScrollView>
  </View>

就像你在上面看到的：有两个组件有 zIndex。所以采取一个有zIndex:1另一个是预期的，但在运行时它们没有变化。

Answer 1

尝试使用 zIndex 和绝对位置进行高程。

在要显示在前层的组件上应用以下样式

style={{ position: 'absolute', elevation: 100,zIndex:100, //other style }}

如果仍然面临问题，请告诉我