无法解析模块`@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 access$200
    BundleDownloader.java:37 onChunkComplete
    BundleDownloader.java:224 emitChunk
    MultipartStreamReader.java:76 readAllParts
    MultipartStreamReader.java:154 processMultipartResponse
    BundleDownloader.java:208 access$100
    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
并通过新路径 @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';

Answer 2

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

npm install --save @expo/vector-icons