使用@material-ui/icons库出现Invariant Violation错误求助

你用的@material-ui/icons和@mui/material是Web端React专属库，直接在React Native项目里使用会触发组件兼容错误——Web库依赖DOM标签（如svg、path），但React Native只识别自身的原生组件（如View、Text），导致报错里的View config getter callback这类问题。

1. 卸载Web端库 #

先把不兼容的Web版库移除：

npm uninstall @material-ui/icons @mui/material
# 用yarn的话执行：
yarn remove @material-ui/icons @mui/material

2. 安装React Native兼容的MUI生态库 #

安装官方为React Native开发的MUI组件库，以及SVG支持依赖（图标需要SVG渲染）：

npm install @mui/material-next @mui/icons-material react-native-svg
# yarn版本：
yarn add @mui/material-next @mui/icons-material react-native-svg

注：React Native 0.60+版本会自动完成react-native-svg的链接，低于该版本需要手动执行链接命令：react-native link react-native-svg

3. 修正图标导入与使用方式 #

替换之前的Web端导入代码，改用RN兼容的组件：

// 错误的Web端导入（删掉）
// import CancelIcon from '@material-ui/icons/Cancel';
// import { SvgIcon } from '@mui/material';

// 正确的RN兼容导入
import CancelIcon from '@mui/icons-material/Cancel';
import { IconButton } from '@mui/material-next';

// 在组件中使用
function App() {
  return (
    <IconButton>
      <CancelIcon />
    </IconButton>
  );
}

额外排查点 #

• 检查项目中是否残留Web端MUI组件的导入，比如不小心混用了@mui/material的Button和RN组件
• 如果之前用过vector-icons，确认没有和当前MUI图标库的样式或组件产生冲突

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