【react native】css踩坑记录

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 }}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’，这样图片会被拉伸或压缩以填满容器。