如何在React Native中定制彩虹风格的二维码设计？

react-native-qrcode-svg本身不支持直接设置渐变颜色，但可以通过react-native-svg的遮罩（Mask）结合渐变组件实现彩虹效果，以下是具体实现步骤：

核心思路 #

利用SVG遮罩特性：将二维码作为遮罩层，只保留二维码的黑色色块区域，然后在遮罩下方放置一个填充彩虹渐变的矩形，最终矩形的渐变会被裁剪成二维码的形状。

实现代码 #

确保已安装react-native-svg（使用react-native-qrcode-svg时通常已依赖该库），然后创建自定义彩虹二维码组件：

import { View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { Svg, LinearGradient, Mask, Rect } from 'react-native-svg';

const RainbowQRCode = ({ value, size, logoConfig }) => {
  return (
    <Svg width={size} height={size}>
      {/* 定义横向彩虹线性渐变，可自定义颜色数组 */}
      <LinearGradient
        id="rainbowGradient"
        x1="0%" y1="0%"
        x2="100%" y2="0%"
        colors={['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#8B00FF']}
      />

      {/* 创建遮罩层：白色背景+黑色二维码，黑色区域会显示下方渐变 */}
      <Mask id="qrMask">
        <Rect width={size} height={size} fill="white" />
        <QRCode
          value={value}
          size={size}
          backgroundColor="transparent"
          color="black"
          {...logoConfig}
        />
      </Mask>

      {/* 应用渐变和遮罩的矩形，大小与二维码一致 */}
      <Rect
        width={size}
        height={size}
        fill="url(#rainbowGradient)"
        mask="url(#qrMask)"
      />
    </Svg>
  );
};

// 使用示例
export default function App() {
  const windowWidth = 375; // 根据实际场景获取屏幕宽度
  const item = { value: 'your-qr-content-here' };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RainbowQRCode
        value={item.value}
        size={windowWidth - 140}
        logoConfig={{
          url: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/logosmalltransparen.png',
          logoSize: 50,
          logoMargin: 50
        }}
      />
    </View>
  );
}

自定义调整 #

• 渐变方向/类型：如果需要径向渐变，将LinearGradient替换为RadialGradient，调整cx、cy、r参数即可
• 颜色方案：修改colors数组中的十六进制颜色值，自定义彩虹色系
• logo配置：通过logoConfig传递原二维码的logo相关属性，确保logo正常显示

注意事项 #

• 确保react-native-svg与react-native-qrcode-svg版本兼容，避免出现渲染异常
• 二维码的color必须设为black，遮罩层依赖黑色区域保留渐变显示；backgroundColor设为transparent避免遮挡

内容的提问来源于stack exchange，提问作者Pankaj Sonava