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

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

Answer 2

尝试使用高程，这可能有助于您区分视图。

zIndex在组件中不起作用

2 个答案: