Expo React Native应用web可运行但安卓端报Invariant Violation错误

错误根因 #

你当前遇到的报错是Web端UI组件和React Native环境不兼容导致的。从错误堆栈可以定位到问题出在PlaylistScreen.js第79行引用的AddIcon组件：该组件属于Web端UI库（如Material UI），底层使用浏览器原生的<path>、<svg>等HTML标签渲染，React Native原生环境无法识别这类非RN标准组件，因此在Expo App端运行触发报错，Web浏览器环境天然支持HTML标签所以运行正常。

解决方案 #

• 替换所有Web端专属UI组件，改为适配React Native的组件。图标类优先使用Expo内置的@expo/vector-icons库，该库已内置Material Icons、Ionicons等常用图标集，无需额外配置即可跨端运行。
• 若需使用自定义SVG，执行命令expo install react-native-svg安装Expo官方适配的SVG渲染库，所有SVG标签统一使用该库导出的组件：例如将原生<svg>替换为import { Svg, Path } from 'react-native-svg'导出的Svg组件，<path>替换为Path组件。
• 排查移除所有RN页面中的HTML标签，比如错误堆栈中出现的<span>、<button>，统一替换为React Native原生提供的View、Text、TouchableOpacity等组件。
• 修复完成后执行npx expo start --clear清除打包缓存，重新扫码启动即可解决问题。

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