Expo Web中<Svg>组件内React Native <Text>元素为何无法渲染？

问题出在你混用了react-native的<Text>组件和react-native-svg的<Svg>组件——react-native的<Text>是原生平台的文本组件，在Web端的SVG上下文里无法被正确解析渲染，必须使用react-native-svg库自身提供的<Text>组件。

解决步骤：

• 替换Text的导入来源，从react-native改成react-native-svg
• 给<Svg>设置明确的宽高，同时通过x、y属性定位文本到SVG可视区域内（默认位置可能在视口外导致看不到）

修改后的代码：

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

const App = () => {
  return (
    <Svg width="200" height="50">
        <Text x="10" y="30" fontSize="16" fill="#000">React Native Text</Text>
    </Svg>
  );
}

export default App;

补充说明：

• react-native-svg的<Text>组件支持SVG标准的文本属性，比如fill（文本颜色）、fontSize、fontFamily等，也可以结合style属性使用部分react-native样式
• 若不设置<Svg>的宽高，Web端可能无法确定SVG容器尺寸，同样会导致内容不可见

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