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

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

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

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

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

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

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

React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
div层调整zindex属性无效原因分析及解决方法
转自:http://blog.sina.com.cn/s/blog_93a6a0c30101fshd.html 在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在C ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React Native每日Apple App动画第二部分：打开图像
在这篇文章中,我们将继续从当天React Native苹果应用程序的最后一部分继续. 在本教程的第一部分中,我们成功实现了React Native Shared元素过渡并设置了UI部分. 在这里,我们 ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...

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

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

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

最新文章

热门文章

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

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

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

最新文章

热门文章

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

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