对本地TypeScript图像和静态资产进行反应
在微软推出的教程中，我一直在关注如何将您的ReactNative项目转换为TypeScript。
一切都进行得很好，直到我达到了需要在我的项目中包含图像的地步。显然，tsc没有将图像打包到outdir中，所以我的问题是，当使用ReactNative和TypeScript?时，人们目前是如何使用图像或其他静态资产的？
回答 2
Stack Overflow用户
发布于 2020-11-15 19:31:54
我不确定这是不是最好的方法，我解决它的方式，
根据文件夹结构在根文件夹中创建包含图像(应由类型记录读取)或任何其他文件夹的文件。将其命名为“your Name -here.d.ts”(d.ts应该是类型记录引擎使用的extension.Its )
declare module '*.jpg' {
import { ImageSourcePropType } from 'react-native';
const value: ImageSourcePropType;
export default value;
}ImageSourcePropType是图像中源参数所期望的类型
现在，在任何时候使用图像的地方都可以作为
import SampleIcon from '../images/sample-image.jpg';
<Image src={SampleIcon} style={{ width: 100, height: 100 }} />Stack Overflow用户
发布于 2018-04-08 07:21:28
选项1-将图像文件夹移动到项目的根：
我最终解决问题的方法是将图像移动到项目的根dir，而不是生活在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的文件。
https://stackoverflow.com/questions/49248216
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号