有源码做网站,百度搜索引擎官网入口,wordpress 电商版本,卫星宽带app1、IOS上面opacity重叠失效
在 iOS 上#xff0c;当两个具有相同背景色的元素重叠时#xff0c;不透明度#xff08;opacity#xff09;较低的元素会显示在较高的元素上方。
所以考虑使用rgba的形式。
// 对于下面这种写法#xff0c;如果存在container和activeIndicat…1、IOS上面opacity重叠失效
在 iOS 上当两个具有相同背景色的元素重叠时不透明度opacity较低的元素会显示在较高的元素上方。
所以考虑使用rgba的形式。
// 对于下面这种写法如果存在container和activeIndicator重叠则始终会展示container的颜色
const styles StyleSheet.create({container: {height: 6,// 在 iOS 上当两个具有相同背景色的元素重叠时// 不透明度opacity较低的元素会显示在较高的元素上方。// 所以需要改用 rgba 的形式backgroundColor: #ffffff,opacity: 0.51,flex: 1,borderRadius: 8,marginHorizontal: 3,overflow: hidden,},activeIndicator: {flex: 1,backgroundColor: #ffffff,},
});// 修改后
const styles StyleSheet.create({container: {height: 6,backgroundColor: rgba(255, 255, 255, 0.51), // hereflex: 1,borderRadius: 8,marginHorizontal: 3,overflow: hidden,},activeIndicator: {flex: 1,backgroundColor: rgba(255, 255, 255, 1), // here},
});2、Image使用图片不能撑满整个容器
image#resizemode
例如对于下面这段代码可能存在这样的情况图片不能撑满整个容器上下会存在空隙。
View style{styles.bgContainer}Imagesource{{ uri: image }}resizeModecontain // 更新为 coverstyle{styles.bg}/
/ViewbgContainer: {position: absolute,top: 0,bottom: 0,left: 0,right: 0,// backgroundColor: yellow,
},
bg: {width: WINDOW_WIDTH,height: WINDOW_HEIGHT,// backgroundColor: blue,
},将 resizeMode 属性设置为 ‘contain’这会导致图片按照原始比例进行缩放以适应容器的尺寸。如果图片的宽高比与容器的宽高比不匹配那么图片可能无法填满整个容器。
如果希望图片填满整个容器可以尝试将 resizeMode 属性设置为 ‘cover’这样图片会被拉伸或压缩以填满容器。
