我正在关注如何将您的ReactNative项目转换为TypeScript的tutorial中。
一切都很顺利,直到我需要在我的项目中包含图像。显然// for _ in 1..<power {
// ans = ans * number
// }
没有将图片打包到outdir中,所以我的问题是当ReactNative与TypeScript一起使用时,人们当前如何使用图像或其他静态资源?
答案 0 :(得分:3)
我最终解决问题的方法是将图像移动到项目的根目录,而不是生活在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 }} />
由于输出的形状应与源目录的形状相匹配,因此引用顶级图像目录可以正常工作。
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的文件。
答案 1 :(得分:2)
我不确定这是否是最好的方法,我解决的方法是
在包含图像的根文件夹中创建文件(应由打字稿读取)或根据您的文件夹结构在任何其他文件夹中创建。 将其命名为“ your-name-here.d.ts”(d.ts应该是扩展名。它由打字稿引擎使用)
declare module '*.jpg' {
import { ImageSourcePropType } from 'react-native';
const value: ImageSourcePropType;
export default value;
}
ImageSourcePropType是Image中的source参数所期望的类型
现在使用图像的地方都可以用作
import SampleIcon from '../images/sample-image.jpg';
<Image src={SampleIcon} style={{ width: 100, height: 100 }} />