react-native 绝对定位元素设置zIndex层级无效 仍旧被遮盖 如何设置层级

react-native层级的设置还是和PC、移动端h5不一样的

如下图所示（博主指的是右上角的“待审核状态”绝对定位层级被卡片TouchableOpacity覆盖）：

以如下代码为例，如果将source对应的Image放在<TouchableOpacity>中，就会被TouchableOpacity覆盖层级，因为在RN中所有子元素都不会超过父元素的层级

这个时候只需要在他们外层加一个容器进行相对定位，就能使得Image的层级回复正常！

<View style={{ flex: 1, position: 'relative' }}>
      {source ? (
        <Image
          style={{
            position: 'absolute',
            zIndex: 10,
            top: OASize(5),
            right: OASize(20),
            width: OASize(imgWidth),
            height: OASize(16),
          }}
          // resizeMode="contain"
          source={source}
        />
      ) : null}
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          marginBottom: OASize(10),
          marginHorizontal: OASize(15),
        }}
        onPress={onPress}
        activeOpacity={0.7}
      >
        <View style={{ padding: OASize(1) }}>
          <View
            style={{
              // paddingHorizontal: OASize(15),
              paddingTop: OASize(15),
              paddingBottom: OASize(15),
              backgroundColor: OAColor.white,
              ...taskStyles,
            }}
          >
            <View style={[OAStyles.row, { flexWrap: 'wrap' }]}>
              <View
                style={{
                  position: 'absolute',
                  left: 0,
                  top: 3,
                  backgroundColor: OAColor.success,
                  opacity: opacitySize,
                  paddingVertical: 1.5,
                  paddingHorizontal: 2,
                  borderRadius: 2,
                }}
              >
                <Text
                  style={{
                    lineHeight: OASize(13),
                    textAlign: 'center',
                    color: OAColor.white,
                    fontSize: OASize(12),
                  }}
                >
                  {item && item.type === 0
                    ? '投票'
                    : item && item.type === 1 && '任务'}
                </Text>
              </View>
              <Text
                style={{
                  ...OAStyles.font,
                  fontSize: OASize(16),
                  color: OAColor.barTitle,
                  lineHeight: OASize(22),
                  opacity: opacitySize,
                }}
                numberOfLines={2}
              >
                {'　    ' + item.title}
              </Text>
            </View>
            <View
              style={[
                OAStyles.row,
                { marginTop: OASize(15), alignItems: 'flex-start' },
              ]}
            >
              {!!item.department && (
                <Text
                  style={[
                    {
                      ...OAStyles.font,
                      flexDirection: 'row',
                      alignItems: 'center',
                      fontSize: OASize(12),
                      lineHeight: OASize(16.5),
                      color: OAColor.txSecondary,
                      marginRight: OASize(10),
                      maxWidth: '70%',
                      opacity: opacitySize,
                    },
                  ]}
                  numberOfLines={1}
                >
                  {item.department}
                </Text>
              )}
              <Text
                style={{
                  ...OAStyles.font,
                  flexDirection: 'row',
                  alignItems: 'center',
                  fontSize: OASize(12),
                  lineHeight: OASize(16.5),
                  color: OAColor.txSecondary,
                  opacity: opacitySize,
                }}
              >
                {fTimeFormat(item.date, 'Y-M-D')}
              </Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </View>