导入“react-native-vector-icon”结果“无法解析模块“@expo/vector-icons”错误答案

【问题标题】：Importing 'react-native-vector-icon' results 'Unable to resolve module '@expo/vector-icons' error导入“react-native-vector-icon”结果“无法解析模块“@expo/vector-icons”错误
【发布时间】：2019-01-17 21:17:48
【问题描述】：

error: bundling failed: Error: Unable to resolve module `@expo/vector-icons/Ionicons` from `E:\React Projects\Tourism\src\screens\TouristInformation\TouristInformation.js`: Module `@expo/vector-icons/Ionicons` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at ResolutionRequest.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)
    at Object.resolve (E:\React Projects\Tourism\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
 BUNDLE  [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓░░░░░░░░░ 48.8% (311/450), failed.

::ffff:127.0.0.1 - - [17/Jan/2019:21:01:47 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.11.0"

我弹出了运行“expo弹出”的项目。然后我添加了“react-native-vector-icon”来使用该包提供的字体图标。但是，每当我将该库导入我的任何 js 文件时。虽然我正在导入“react-native-vector-icon”，但它显示了上述错误。

TouristInformation.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Image,
  View,
} from 'react-native';
import residentBackgroundImage from '../../assets/residentBackground.jpg';
import Icon from 'react-native-vector-icons/Ionicons';
export default class TouristInformation extends Component {
  render() {
    return(
      <View>
        <Image
          source = {residentBackgroundImage}
          style = {styles.image} />
        <Text> Yomuna </Text>
      <Icon name="ios-person" size={30} color="#4F8EF7" />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  image:{

  },
});

【问题讨论】：

标签： react-native react-native-android react-native-vector-icons

【解决方案1】：

您是否安装了 @expo/vector-icons 作为依赖项？如果是这样，它可能与 react-native-vector-icons 冲突（react-native-vector-icons 已经是 @expo/vector-icons 的依赖项）。既然你已经从 Expo 中退出我不确定你想要安装那个包。

react-native-vector-icons 要求您链接原生依赖项。首先要尝试的是来自终端的react native link。它似乎在 iOS 上比在 Android 上更有效。如果这不起作用，还有其他手动方法可以做到。

From the RN docs From the package docs (scroll down to the Android section)

【讨论】：

感谢@stever 的回复。我运行了“react-native link”，甚至尝试手动链接项目。但错误似乎仍然存在。我尝试按照错误屏幕上列出的建议解决它（重置 Metro bundler、删除加速缓存、删除 node_module 文件夹）

【解决方案2】：

这个问题与 `babel-preset-expo' 有关。

要解决，请执行以下操作：

运行yarn remove babel-preset-expo
运行yarn add metro-react-native-babel-preset
在您的babel.config.js 中，从预设中删除babel-preset-expo，而是添加module:metro-react-native-babel-preset

您的 babel.config.js 现在应该如下所示：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["module:metro-react-native-babel-preset"],
  };
};

【讨论】：

【解决方案3】：

运行以下命令。

npm i react-native-vector-icons
npx react-native link react-native-vector-icons

【讨论】：