React Native Expo安卓端SVG报错：文本需在<Text>组件内渲染

核心问题分析 #

1. 安卓端报错Text strings must be rendered within a <Text> component：React Native的react-native-svg库不支持SVG中的<style>标签，会把标签内的样式文本（如.st0{fill:#fff}）视为普通文本节点，而React Native要求所有文本必须包裹在<Text>组件中，因此触发错误。
2. 移除<style>后报错Path is not function or class component：SVGR默认生成的是Web端原生SVG元素（如<path>），而非React Native适配的react-native-svg库中的Path组件，导致React Native无法识别该元素。

解决步骤 #

1. 安装依赖 #

确保项目已安装React Native SVG适配库：

expo install react-native-svg

2. 重新用SVGR生成React Native适配组件 #

使用SVGR的--native参数重新转换SVG，确保生成的组件基于react-native-svg：

npx @svgr/cli --native your-svg-file.svg > CustomSvg.js

转换后的组件会自动导入react-native-svg中的对应元素，示例：

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

const CustomSvg = ({ width = 24, height = 24, fill = "#000" }) => (
  <Svg width={width} height={height} viewBox="0 0 24 24">
    <Path fill="#fff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
  </Svg>
);

export default CustomSvg;

3. 手动调整样式（若转换后仍有类名） #

如果转换后的组件还保留类名（如className="st0"），直接将类对应的样式属性内联到元素上，例如：

• 原代码：<Path className="st0" d="..." />
• 修改为：<Path fill="#fff" d="..." />

4. 导入使用组件 #

在项目中直接导入生成的组件即可跨平台使用：

import CustomSvg from './CustomSvg';

// 在组件中使用
<CustomSvg width={40} height={40} />

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