React Native qrcode-svg跨平台（移动端/网页）尺寸适配问题求助

问题梳理 #

当前使用react-native-qrcode-svg时，固定size=350在移动端显示正常，但网页端尺寸过大影响扫码；尝试通过Platform.OS判断设置不同尺寸未生效，同时需适配base64格式的二维码图片生成逻辑。

可行解决思路 #

1. 确认Platform模块正确导入 #

首先检查是否正确导入React Native的Platform模块，未导入会导致Platform.OS判断失效：

import { Platform } from 'react-native';

简化尺寸判断逻辑（iOS和Web端统一设为100）：

<QRCode
  value={codeValue}
  size={Platform.OS === 'android' ? 350 : 100}
  getRef={(c) => { svg = c; }}
/>

2. 基于屏幕宽度自适应 #

使用Dimensions获取屏幕宽度，按比例设置二维码尺寸，适配不同设备：

import { Dimensions, Platform } from 'react-native';

const screenWidth = Dimensions.get('window').width;
// Web端限制最大尺寸，移动端按屏幕比例适配
const qrSize = Platform.OS === 'web' 
  ? Math.min(150, screenWidth * 0.3) 
  : screenWidth * 0.9;

<QRCode
  value={codeValue}
  size={qrSize}
  getRef={(c) => { svg = c; }}
/>

3. 用容器样式控制尺寸（Web端专属优化） #

给QRCode套一层容器，通过容器样式限制宽高，让二维码自适应容器大小：

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

const styles = StyleSheet.create({
  qrWrapper: {
    width: Platform.OS === 'web' ? 150 : 350,
    height: Platform.OS === 'web' ? 150 : 350,
  }
});

<View style={styles.qrWrapper}>
  <QRCode
    value={codeValue}
    size="100%"
    getRef={(c) => { svg = c; }}
  />
</View>

若组件不支持百分比尺寸，可直接用容器尺寸作为二维码的size值：

const containerSize = Platform.OS === 'web' ? 150 : 350;

<View style={{width: containerSize, height: containerSize}}>
  <QRCode
    value={codeValue}
    size={containerSize}
    getRef={(c) => { svg = c; }}
  />
</View>

4. 适配base64图片生成尺寸 #

生成base64图片时，同步按平台设置对应尺寸，避免Web端图片过大：

// 根据平台设置生成图片的尺寸
const exportSize = Platform.OS === 'web' ? 100 : 350;
// 调用组件的toDataURL方法时指定尺寸
const dataURL = svg.toDataURL(exportSize, exportSize);
// 最终生成的base64图片
const icon = `data:image/png;base64,${dataURL}`;

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