无法解析模块@@expo/向量-图标/字体/ionicons.ttf`

Question

绝对的新手在这里的反应，

我试图遵循这里中的react本机教程，在尝试运行第二个应用程序版本(v0.1.1)时会出现以下错误。

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

我搜索了错误，并尝试了建议的这里步骤(从依赖项中删除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/fonts/...更改导入路径@expo/vector-icons/website/src/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