无法解析模块“@expo/vector-icons/fonts/Ionicons.ttf”

Question

这里是 React Native 的绝对初学者，

我正在尝试按照 here 中的 React Native 教程进行操作，但在尝试运行第二个应用程序版本 (v0.1.1) 时出现以下错误。

我按照教程中的建议使用 expo 创建项目。我尝试删除 node_modules 并重新安装依赖项，我尝试执行错误中建议的步骤。

我用谷歌搜索了错误并尝试了 here 建议的步骤（从依赖项中删除 babel-preset-expo 并重新安装它们），但没有任何帮助。

这是版本问题吗？我看到 Ionicons.ttf 确实存在于 node_modules\@expo\vector-icons 下，但在不同的路径中，@expo/vector-icons/website/src/fonts

The development server returned response error code: 500

URL: http://192.168.1.102:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fyossiv%2Fgit%2Fqr-scanner%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js

Body: {"originModulePath":"/Users/yossiv/git/qr-scanner/App.js",
       "targetModuleName":"@expo/vector-icons/fonts/Ionicons.ttf",
       "message":"Unable to resolve module `@expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `@expo/vector-icons/fonts/Ionicons.ttf` 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-*`.","errors":[{"description":"Unable to resolve module `@expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `@expo/vector-icons/fonts/Ionicons.ttf` 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-*`."}],"name":"Error","stack":"Error: Unable to resolve module `@expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `@expo/vector-icons/fonts/Ionicons.ttf` 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 (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
 at ResolutionRequest.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
 at DependencyGraph.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
 at Object.resolve (/Users/yossiv/git/qr-scanner/node_modules/metro/src/lib/transformHelpers.js:180:25)
 at dependencies.map.result (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
 at Array.map (<anonymous>)
    at resolveDependencies (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
 at /Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
 at Generator.next (<anonymous>)
    at step (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)"} processBundleResult
    BundleDownloader.java:300 access0
    BundleDownloader.java:37 onChunkComplete
    BundleDownloader.java:224 emitChunk
    MultipartStreamReader.java:76 readAllParts
    MultipartStreamReader.java:154 processMultipartResponse
    BundleDownloader.java:208 access0
    BundleDownloader.java:37 onResponse
    BundleDownloader.java:169 c
    RealCall.java:135 run
    NamedRunnable.java:32 runWorker
    ThreadPoolExecutor.java:1133 run
    ThreadPoolExecutor.java:607 run
    Thread.java:761

Answer 1

模块安装使用相同图标可能会发生冲突

npm install --save @expo/vector-icons

Answer 2

你必须做npm install --save @expo/vector-icons
并在您调用该字体的文件中通过新路径 @expo/vector-icons/website/src/fonts/... 更改导入路径 @expo/vector-icons/fonts/...。

例子

import IoniconsFont from '@expo/vector-icons/fonts/Ionicons.ttf';

来自

import IoniconsFont from '@expo/vector-icons/website/src/fonts/Ionicons.ttf';

无法解析模块“@expo/vector-icons/fonts/Ionicons.ttf”

Unable to resolve module `@expo/vector-icons/fonts/Ionicons.ttf`

react-native

npm-install