React Native中为react-native-qrcode-svg生成的二维码添加白色背景并保存至相册的方案咨询

The black background problem happens because the default QR code generated by react-native-qrcode-svg has a transparent background. When saved as a PNG, many gallery apps render transparency as black, which breaks scanner recognition. Here are a few straightforward fixes to resolve this:

1. Add White Background Directly to the QRCode Component #

The simplest solution is to use the library's built-in backgroundColor prop to set a solid white background directly on the QR code:

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  getRef={(c) => (svg = c)}
  backgroundColor="white" // Add this line to set white background
  color="black" // Optional: explicitly define QR code color for better contrast
/>

This generates the QR code with a white background right from the start, so when you save it to the gallery, there's no transparency to be filled in as black.

2. Wrap QRCode in a Custom SVG for Advanced Background Control #

If you need more customization (like padding, rounded corners, or a border), wrap the QRCode in an Svg component (from react-native-svg) and add a white rectangle as the base layer:

First, ensure react-native-svg is installed (it’s a peer dependency for react-native-qrcode-svg):

npm install react-native-svg
# or
yarn add react-native-svg

Then update your component code:

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

// ...

const qrSize = width * 0.5;
const padding = 12; // Add padding around the QR code
const totalSize = qrSize + padding * 2;

<Svg width={totalSize} height={totalSize}>
  {/* White background with optional rounded corners */}
  <Rect
    width="100%"
    height="100%"
    fill="white"
    rx={10} // Optional: adjust for rounded corners
  />
  {/* QR code positioned on top of the background */}
  <QRCode
    value={singleTicketResponse.voucher}
    size={qrSize}
    getRef={(c) => (svg = c)}
    x={padding}
    y={padding}
    color="black"
  />
</Svg>

This approach lets you fine-tune the background appearance while keeping the QR code properly centered.

3. Double-Check Your Save Logic (Optional) #

If you still face issues after adding the background, confirm your save code is handling the file correctly. Here’s a refined version with clearer error handling (note the updated CameraRoll import for newer React Native versions):

import RNFS from 'react-native-fs';
import { CameraRoll } from '@react-native-camera-roll/camera-roll';

// ...

svg.toDataURL((data) => {
  const filePath = `${RNFS.CachesDirectoryPath}/${tracking_code}.png`;
  
  RNFS.writeFile(filePath, data, 'base64')
    .then(() => CameraRoll.save(filePath, { type: 'photo' }))
    .then(() => {
      console.log('QR code saved to gallery successfully!');
      onClose();
    })
    .catch((e) => {
      console.error('Error saving QR code:', e);
    });
});

Note: For React Native 0.60+, the original CameraRoll API was moved to the @react-native-camera-roll/camera-roll package, so make sure you’ve installed and imported it correctly.

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