我跟随微软推出的关于如何将你的ReactNative项目转换为TypeScript的
tutorial.
一切都很顺利,直到我达到我需要在项目中包含图像的程度.显然tsc没有将图像打包到outdir中,所以我的问题是当ReactNative与TypeScript一起使用时,人们当前如何使用图像或其他静态资源?
选项1 – 将图像文件夹移动到项目的根目录:
我最终解决问题的方法是将图像移动到项目的根目录,而不是生活在src目录中.
在项目根目录中创建一个images文件夹
images/ - sample-image.jpg src/ - App.tsx output/ - App.js
使用相对路径引用图像
const image = require('../images/sample-image.jpg'); ... <Image src={image} style={{ width: 100,height: 100 }} />
由于输出的形状应与源目录的形状相匹配,因此引用顶级图像目录的工作正常.
选项2 – 使用copyfiles npm包:
此选项允许您保持图像内联,但在重建项目时需要额外的步骤.
安装copyfiles
npm i -D copyfiles
将以下内容添加到package.json脚本中
... "start": "npm run build && node node_modules/react-native/local-cli/cli.js start","build": "npx tsc && npm run add-assets","add-assets": "copyfiles -u 1 'src/**/!(*.js|*.jsx|*.map|*.ts|*.tsx)' lib/",...
现在执行npm run build或npm start,我们漂亮的新包copyfiles将通过任何非源文件复制到out目录.
注意:您可能需要根据需要更新glob,以忽略您不希望复制到outdir的文件.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。