Expo项目引入组件库触发Invariant Violation错误求助

错误原因 #

你导入的antd是Web端React组件库，它的Avatar组件会渲染Web原生的<img>标签，但React Native环境不存在DOM元素，因此React Native无法识别img组件的配置，触发了这个错误。

步骤解决 #

• 安装React Native适配版的Ant Design组件库：

  npm install @ant-design/react-native
  # 或使用yarn
  yarn add @ant-design/react-native
  

• 若不需要Web版antd，可卸载它：

  npm uninstall antd
  

• 修改导入语句：
  将import { Avatar } from 'antd';替换为：

  import { Avatar } from '@ant-design/react-native';
  

• 调整Avatar组件的图片属性：
  React Native版Avatar使用source属性指定网络图片，替换原src写法：

  <Avatar source={{ uri: "https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" }} />
  

完成以上修改后，重新运行项目即可解决该渲染错误。

内容的提问来源于stack exchange，提问作者Raquel Casado Dias