React Native TypeScript图像和静态资产

发布时间：2020-12-15 05:08:02 所属栏目：百科来源：网络整理

导读：我跟随微软推出的关于如何将你的ReactNative项目转换为TypeScript的 tutorial. 一切都很顺利,直到我达到我需要在项目中包含图像的程度.显然tsc没有将图像打包到outdir中,所以我的问题是当ReactNative与TypeScript一起使用时,人们当前如何使用图像或其他静态

我跟随微软推出的关于如何将你的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的文件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!