React Native TypeScript图像和静态资产

Question

我在微软推出如何将你的ReactNative项目转换为TypeScript 的教程中继续学习.

一切都很顺利,直到我达到我需要在项目中包含图像的程度.显然tsc没有将图像打包到outdir中,所以我的问题是当ReactNative与TypeScript一起使用时,人们当前如何使用图像或其他静态资源？

Answer 1

选项 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 - 使用copyfilesnpm 包：

此选项允许您保持图像内联，但在重建项目时需要额外的步骤。

安装 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 buildor npm start，我们漂亮的新包copyfiles将复制任何非源文件到 out 目录。

注意：您可能需要根据需要更新 glob 以忽略您不想复制到 outdir 的文件。

Answer 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 }} />