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

    技术2022-07-10  127

    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>

     

    Processed: 0.023, SQL: 9