Expo应用网页端正常运行，安卓端崩溃问题排查求助

算力阿峰

2026-7-18

Expo安卓端SVG组件崩溃问题排查与解决

核心原因

Expo的Web环境默认支持直接将.svg文件作为React组件导入使用，但安卓原生端没有内置这个能力。当你在安卓端使用<Logo />这类导入的SVG组件时，系统无法解析SVG内部的<path>、<rect>等标签，找不到对应的视图配置，就会触发invariant violation报错。

解决步骤

安装Expo官方SVG处理依赖
先安装react-native-svg，这是Expo原生端处理SVG的核心库：
```
npx expo install react-native-svg
```

配置SVG文件转React组件的转换器
要让安卓端识别.svg文件为组件，需要添加react-native-svg-transformer并配置Metro：

安装开发依赖：

npm install --save-dev react-native-svg-transformer

在项目根目录创建metro.config.js，粘贴以下配置：

const { getDefaultConfig } = require('expo/metro-config');

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg'],
  };

  return config;
})();