React Native TypeScript 图片和静态资源

Posted 2023-03-13

【中文标题】React Native TypeScript 图片和静态资源

【英文标题】：React Native TypeScript Images & Static Assets

【发布时间】：2018-08-21 05:45:09

【问题描述】：

我一直在关注微软发布的 tutorial 如何将您的 ReactNative 项目转换为 TypeScript。

一切都很好，直到我需要在我的项目中包含图像。显然tsc 不会将图像打包到 outdir 中，所以我的问题是 在将 ReactNative 与 TypeScript 一起使用时，人们目前如何使用图像或其他静态资产？

【问题讨论】：

它的工作方式与直接 JS 相同。使用require

【参考方案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 - 使用 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 会将任何非源文件复制到输出目录。

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

【讨论】：

第一个选项有帮助。但认为这不是生产应用程序的最佳选择。

我在考虑使用符号链接，这种方法有什么问题吗？

嘿，贾斯汀，你的第一条建议过去对我很有用。但是现在，当我尝试在新计算机上运行我的项目时，所有静态图像都没有显示 - 什么都没有看到（项目确实运行）知道可能导致这种情况的原因吗？

【参考方案2】：

我不确定这是否是最好的方法，我解决它的方法是，

根据您的文件夹结构在包含图像的根文件夹（应由打字稿读取）或任何其他文件夹中创建一个文件。 将其命名为“your-name-here.d.ts”（d.ts 应该是扩展名。它由 typescript 引擎使用）

 declare module '*.jpg' 
  import  ImageSourcePropType  from 'react-native';
  const value: ImageSourcePropType;
  export default value;

ImageSourcePropType 是 Image 中源参数所期望的类型

现在任何使用图像的地方都可以用作

import SampleIcon from '../images/sample-image.jpg';

<Image src=SampleIcon style= width: 100, height: 100  />