react-native - 无法解析模块`@expo/vector-icons/fonts/Ionicons.ttf`
问题描述
在这里反应原生的绝对初学者,
我正在尝试遵循此处的 react native 教程,但在尝试运行第二个应用程序版本(v0.1.1)时出现以下错误。
按照教程中的建议,我正在使用 expo 创建项目。我尝试删除 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
解决方案
您必须 通过 调用该字体的文件中的新 路径来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';
推荐阅读
- php - 如何使用 API 在 Mastodon 上发布媒体(图像)?
- php - 尝试同时加载/执行两个表值
- reactjs - 使用预签名 URL 上传到 AWS S3 时出现 403(禁止)
- asp.net - ASP.net Core Bearer error="invalid_token", error_description="签名无效"
- android - 打开另一个片段后无法启动带有谷歌地图的片段(使用导航抽屉)
- ios - 如何让视频播放完毕后消失,以便用户继续使用该应用程序?
- java - Java - 使用“/”作为第一个参数会引发 java.nio.file.InvalidPathException
- react-native - 预加载图像但不显示
- c# - 如何在背景上制作晕影效果?
- unit-testing - F# 使用 Pose 填充 printfn 进行单元测试