导入React Native Elements框架时出现Invariant violation错误求助

嘿，这种情况我之前踩过坑！你遇到的Invariant violation错误，十有八九是react-native-elements（简称RNE）和你的React Native版本不兼容，或者是依赖包安装/链接出了问题——毕竟新建项目都复现了，说明不是你代码的锅，是环境或依赖的问题。

下面给你几个一步步排查解决的方案：

RNE对React Native的版本有明确要求，尤其是Icon组件依赖的react-native-vector-icons，版本不匹配很容易触发这类错误。

• 先查你当前RN的版本：

  react-native info
  

• 确保你安装的RNE版本和RN版本适配（比如RN 0.70+建议用RNE 3.x版本）。

依赖安装不完整是常见元凶，按这个流程来：

• 先卸载现有相关依赖：

  # npm用户
  npm uninstall react-native-elements react-native-vector-icons
  # yarn用户
  yarn remove react-native-elements react-native-vector-icons
  

• 清理缓存，避免残留问题：

  npm cache clean --force
  # yarn的话用这个
  yarn cache clean
  

• 重新安装最新兼容版本：

  npm install react-native-elements@latest react-native-vector-icons@latest
  

• iOS用户别忘更新pod：

  cd ios && pod install && cd ..
  

• 最后重启Metro服务，一定要加清缓存参数：

  react-native start --reset-cache
  

  重启后再运行项目试试。

有时候错误是因为Icon组件用错了——RNE的Icon必须指定type属性，比如用Material图标要加type="material"，FontAwesome图标加type="font-awesome"，举个正确的例子：

<Icon name="user" type="material" color="#000" />

如果没加type，也可能触发奇怪的错误。

如果你用的是RN 0.60之前的版本，需要手动链接react-native-vector-icons，或者在babel.config.js里加个插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'react-native-vector-icons',
      {
        iconFonts: ['MaterialIcons', 'FontAwesome']
      }
    ]
  ]
};

不过新版RN自动链接已经搞定了，这步可以忽略。

做完上面的步骤后，写个极简的测试代码验证：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Input, Icon } from 'react-native-elements';

export default function App() {
  return (
    <View style={styles.container}>
      <Input placeholder="测试输入框" />
      <Icon name="home" type="material" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
});

启动项目应该就能正常运行了。

内容的提问来源于stack exchange，提问作者Stanly Medjo