Question

在这里反应原生的绝对初学者，

我正在尝试遵循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/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

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

2 个答案: