导入'react-native-vector-icon' 结果'无法解析模块'@expo/vector-icons' 错误 [英] Importing 'react-native-vector-icon' results 'Unable to resolve module '@expo/vector-icons' error
问题描述
错误:捆绑失败:错误:无法从`E:\React Projects\Tourism\src\screens\TouristInformation\TouristInformation.js`解析模块`@expo/vector-icons/Ionicons`:模块`@expo/vector-icons/Ionicons` 在 Haste 模块图中不存在这可能与 https://github.com/facebook/react-native/issues/4968 有关要解决请尝试以下操作:1. 清除守望者手表:`watchman watch-del-all`.2.删除`node_modules`文件夹:`rm -rf node_modules &&npm 安装`.3. 重置 Metro Bundler 缓存:`rm -rf/tmp/metro-bundler-cache-*` 或 `npm start -- --reset-cache`.4. 移除加速缓存:`rm -rf/tmp/haste-map-react-native-packager-*`.在 ModuleResolver.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)在 ResolutionRequest.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)在 DependencyGraph.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)在 Object.resolve (E:\React Projects\Tourism\node_modules\metro\src\lib\transformHelpers.js:141:30)在dependencies.map.result (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)在 Array.map (<匿名>)在 resolveDependencies (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)在 E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33在 Generator.next (<匿名>)在步骤 (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)BUNDLE [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓░░░░░░░░░ 48.8% (311/450)，失败.::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 eject"的项目.然后我添加了 'react-native-vector-icon' 以使用该包提供的字体图标.但是，每当我将该库导入我的任何 js 文件时.虽然我正在导入react-native-vector-icon"，但它显示了上述错误.
TouristInformation.js
import React, { Component } from 'react';进口 {样式表，文本，图像，看法，来自'反应原生';从 '../../assets/residentBackground.jpg' 导入 residentBackgroundImage;从'react-native-vector-icons/Ionicons'导入图标；导出默认类 TouristInformation 扩展组件 {使成为() {返回(<查看><图像来源 = {residentBackgroundImage}样式 = {styles.image}/><文字>Yomuna </Text><图标名称="ios-person" size={30} color="#4F8EF7"/></查看>);}}const 样式 = StyleSheet.create({图像:{},});您是否安装了 @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 部分)
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:{
},
});
Do you have @expo/vector-icons installed as a dependency? If so, it may be conflicting with react-native-vector-icons (react-native-vector-icons is already a dependency of @expo/vector-icons).Since you've already ejected from Expo I'm not sure you want that package installed.
react-native-vector-icons requires you to link native dependencies. The first thing to try is react native link from the terminal. It seems to work better with iOS than with Android. If that doesn't work there are other manual ways to do it.
From the RN docs From the package docs (scroll down to the Android section)
这篇关于导入'react-native-vector-icon' 结果'无法解析模块'@expo/vector-icons' 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
