【react native】css踩坑记录

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使用,图片不能撑满整个容器

image#resizemode

例如,对于下面这段代码可能存在这样的情况,图片不能撑满整个容器,上下会存在空隙。

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

相关推荐
水星梦月6 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
冰暮流星11 小时前
css之线性渐变
前端·css
冰暮流星16 小时前
css3新增背景图片样式
前端·css·css3
天外飞雨道沧桑17 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai
楊无好18 小时前
react中的受控组件与非受控组件
前端·react.js
菠萝+冰18 小时前
react虚拟滚动
前端·javascript·react.js
华仔啊1 天前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
明月与玄武1 天前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
Sherry0071 天前
【译】 CSS 布局算法揭秘:一次思维转变,让 CSS 从玄学到科学
前端·css
夜雨深秋来1 天前
BEM方法论:构建可维护的前端CSS架构
前端·css