javascript - zIndex 在组件中不起作用

Question

我有一个蓝色标题，我想在另一个 View 中使用动画事件参与其中。但在我执行动画功能之前，我手动设置了 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 }}

如果还有问题请告诉我