Question

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

  },
});

Answer 1

您是否已将@ expo / vector-icons安装为依赖项？如果是这样，它可能与react-native-vector-icons冲突（react-native-vector-icons已经是@ expo / vector-icons的依赖项）。由于您已经从Expo中退出，所以不确定想要安装该软件包。

react-native-vector-icons要求您链接本机依赖项。首先尝试的是来自终端的react native link。与iOS相比，iOS似乎更好。如果那不起作用，还有其他手动方法可以实现。

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

Answer 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"],
  };
};

Answer 3

运行以下命令。

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

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

3 个答案: