How to use assets lib in react native with NX?

Question

我有一个用 nx 生成的 React Native 应用程序。

我想使用应用程序中的资产库。

目标是拥有这样的东西：

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 应用程序的资产文件夹，这违反了 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

感谢任何帮助:)

Answer 1

如果我理解正确的问题 - 你需要像这样允许访问 project.json 中的资产：

{
  "executor": "@nrwl/react-native:run-android",
  "options": {
    "assets": ["./shared/assets"]
  }
}

然后

import image from '@appname/shared/assets/image.png';
...
<Image source={image} />

应该工作！