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>