时间戳

首页 > 解决方案 > zIndex 在组件中不起作用

javascript - zIndex 在组件中不起作用

问题描述

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

   <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预计会采用另一个，但在运行时它们没有变化。

标签： javascriptandroidreactjsreact-native

解决方案

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

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

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

让我知道是否仍然面临问题

推荐阅读