Импортирование результатов "response-native-vector-icon" "Не удалось разрешить модуль" @expo/vector-icons ", ошибка

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"

Я выбросил проект с запущенной экспозицией. Затем я добавил "response-native-vector-icon", чтобы использовать значки шрифтов, предоставляемые этим пакетом. Но всякий раз, когда я импортирую эту библиотеку в любой из моих файлов JS. Несмотря на то, что я импортирую 'response-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, установленные как зависимости? Если это так, он может конфликтовать с response-native-vector-icons (Reaction-native-vector-icons уже является зависимостью от @expo/vector-icons). Так как вы уже вышли из Expo, я не уверен, что вы хочу, чтобы этот пакет был установлен.

response-native-vector-icons требует, чтобы вы связали нативные зависимости. Первое, что нужно попробовать react native link из терминала. Похоже, лучше работает с iOS, чем с Android. Если это не работает, есть другие ручные способы сделать это.

Из документации RN Из документации пакета (прокрутите вниз до раздела Android)

Answer 2

Выполните следующие команды.

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

Answer 3

Проблема связана с `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"],
  };
};