React Native中如何将函数组件作为QRCode的传入值？

我想给PortfolioCard函数组件生成二维码，扫码后直接展示这个组件，但QRCode组件只支持传入字符串类型的值，直接传<PortfolioCard />会报错，该怎么实现？

代码示例 #

PortfolioCard组件 #

export default function PortfolioCard() {
  return (
    <View>
      <Text style={styles.heading}>My Portfolio</Text>
      <View style={styles.card}>
         // 组件剩余代码
      </View>
    </View>
  )
}

报错的写法 #

function App(): JSX.Element {
  return (
      <View>
         <QRCode
              value={<PortfolioCard />}
         />
      </View>
  );
}

扫码后预期展示的卡片：

解决方案 #

方案1：将组件部署为独立页面，用页面URL作为二维码值（推荐） #

这是最实用且兼容性好的方案，核心思路是把PortfolioCard放到一个可访问的页面中，将页面的链接作为QRCode的value，扫码后打开该页面即可展示组件。

实现步骤：

1. 在你的项目中给PortfolioCard配置独立路由（比如用React Navigation），或者部署成web页面。
2. 生成该页面的访问链接（App内的Deep Link或web URL）。
3. 将链接传入QRCode的value属性。

代码示例：

function App(): JSX.Element {
  // 假设App内路由路径为'/portfolio-card'，生成Deep Link
  const cardLink = 'myapp://portfolio-card';
  // 如果是web项目，直接用页面URL：'https://your-domain.com/portfolio-card'
  return (
      <View>
         <QRCode value={cardLink} />
      </View>
  );
}

后续只需要处理扫码后的跳转逻辑：比如在App中监听Deep Link，跳转到对应路由页面展示PortfolioCard；web环境下扫码直接打开URL即可。

方案2：将静态组件转为字符串存入二维码（仅适用于纯静态内容） #

如果PortfolioCard是纯静态展示内容，可以把组件渲染成HTML字符串（web环境）或图片base64字符串，再将字符串传入QRCode。但这种方式局限性大，动态内容无法支持，且React Native环境下实现复杂。

web环境示例：

import ReactDOMServer from 'react-dom/server';

function App() {
  // 将组件转为HTML字符串
  const cardHtml = ReactDOMServer.renderToString(<PortfolioCard />);
  // 转为data URI，扫码后可直接在浏览器中展示
  const dataUri = `data:text/html;charset=utf-8,${encodeURIComponent(cardHtml)}`;
  return (
    <div>
      <QRCode value={dataUri} />
    </div>
  );
}

总结 #

优先选择方案1，通过页面链接实现扫码展示组件，不仅支持动态内容，而且实现简单、兼容性强。

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