React Native 使用react-native-svg实现发光背景装饰块透明度问题咨询

首先排查react-native-svg不生效的原因 #

• 检查SVG文件的内部属性：打开你使用的SVG源文件，确认路径/形状的fill-opacity属性没有被固定设置为1，也没有全局的opacity="1"配置
• 检查react-native-svg的属性写法：react-native-svg要求所有带横杠的原生SVG属性改为驼峰写法，fill-opacity要写为fillOpacity，属性值采用数字格式不要加引号，正确示例：

import Svg, { Path } from 'react-native-svg';

<Svg width="200" height="200" style={{ position: 'absolute', top: 0, left: 0 }}>
  <Path d="M0 0 L200 0 L0 200 Z" fill="#22c55e" fillOpacity={0.2} />
</Svg>

• 检查父元素样式覆盖：确认SVG的父容器没有设置opacity: 1或者不透明的backgroundColor覆盖了SVG的透明度效果

更简单的替代实现方案（无需SVG） #

直接用RN自带的View实现左上角装饰色块，性能更好也不会有SVG兼容问题，示例代码：

import { View, StyleSheet } from 'react-native';

// 在页面根容器内添加这个View即可
<View style={styles.greenDecor} />

// 样式定义
const styles = StyleSheet.create({
  greenDecor: {
    position: 'absolute',
    top: -50,
    left: -50,
    width: 250,
    height: 250,
    backgroundColor: 'rgba(34, 197, 94, 0.2)', // 最后一位为透明度参数，可按需调整
    borderBottomRightRadius: 120, // 调整圆角匹配参考图效果，也可以配合transform旋转属性修改形状
  }
})

内容的提问来源于stack exchange，提问作者Ehtesham Siddiqui