如何在react native中使用资源库?

5t7ly7z5  于 2023-03-09  发布在  React
关注(0)|答案(1)|浏览(151)

我有一个用nx生成的react原生应用程序。
我想使用应用程序中的资源库。
我们的目标是这样的:

import { image } from "@appname/shared/assets";

<Image source={image}/>

或:

<Image source={require('/assets/image.png')}/>

或者甚至:

import image from '../assets/image.png';

<Image source={image}/>

这些解决方案都不起作用,没有崩溃,但图像不显示。
问题:似乎没有react native的更新文档,所有的nx教程都过时了,并且不再适用于新的项目结构。

  • 没有"angular.json",我可以在其中设置资源路径。
  • project.json中的"run-android"执行器没有资产选项。

我只有一个办法能让它成功:

<Image source={require('./../../../../../apps/appname/src/assets/image.png')}/>

这意味着我必须使用react应用的assets文件夹的相对路径(从当前组件所在的lib),这违背了nx原则。
我的项目结构是这样的:

project/
├── apps/
| ├── appname
|   ├── src
|     ├── assets
|       ├── image.png <= the image that can be shown
├── libs/
  ├─── components
  |   ├── src
  |     ├── lib
  |       ├── component.tsx <= component from which i want to display the image
  ├── shared
    ├── assets
      ├── image.png <= the image I want to use

任何帮助都很感激:)

qeeaahzv

qeeaahzv1#

我试过用一个库,代码像

<Image
      source={require('@appname/shared/assets/src/logo.png')}
    />

我觉得没问题。我应该看到没有任何特殊配置的图片。
我是这么做的:
1.通过运行创建资源库
nx g@nrwl/react-native:库资产--目录=共享
1.在根目录tsconfig.base.json的路径add下
"@应用程序名称/共享/资产/* ":["库/共享/资产/*"]
现在,在应用程序文件中,我可以使用require来包含png图像。

相关问题