1、IOS上面opacity重叠失效
在 iOS 上,当两个具有相同背景色的元素重叠时,不透明度(opacity)较低的元素会显示在较高的元素上方。
所以考虑使用rgba的形式。
javascript
// 对于下面这种写法,如果存在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)', // here
flex: 1,
borderRadius: 8,
marginHorizontal: 3,
overflow: 'hidden',
},
activeIndicator: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 1)', // here
},
});
2、Image使用,图片不能撑满整个容器
例如,对于下面这段代码可能存在这样的情况,图片不能撑满整个容器,上下会存在空隙。
javascript
<View style={styles.bgContainer}>
<Image
source={{ uri: image }}
resizeMode='contain' // 更新为 'cover'
style={styles.bg}
/>
</View>
bgContainer: {
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',这样图片会被拉伸或压缩以填满容器。