1 
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"

I ejected the project running 'expo eject'. Then I added 'react-native-vector-icon' to use font icons provided by that package. But, whenever I import that library to any of my js file. Though I'm importing 'react-native-vector-icon',it shows the above error.

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:{

  },
});
4

3 回答 3

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 上更有效。如果这不起作用，还有其他手动方法可以做到这一点。

来自 RN 文档 从包文档（向下滚动到 Android 部分）

于 2019-01-17T21:31:18.660 回答
0

这个问题与“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"],
  };
};
于 2019-08-30T02:48:58.897 回答
0

运行以下命令。

npm i react-native-vector-icons
npx react-native link react-native-vector-icons
于 2020-06-02T15:34:31.123 回答