如何在NX构建的React Native项目中使用资产库？

方案1：Metro配置+共享库导出（推荐） #

1. 把shared/assets转为可导出的NX库 #

如果shared/assets还不是正式的NX库，先执行命令创建：

nx g @nx/react-native:library assets --directory=shared --no-interactive

将图片资源移到libs/shared/assets/src/lib目录（或自定义子目录，后续路径对应调整即可）。

2. 在共享库中导出资源 #

在libs/shared/assets/src/index.ts中统一导出图片：

export const image = require('./lib/image.png'); // 路径根据实际存放位置修改

3. 配置Metro支持路径别名与资产处理 #

修改项目根目录的metro.config.js，让Metro识别共享库路径并监听资源变化：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');
const nxMetroConfig = require('@nx/react-native/plugins/metro-config');

const customConfig = {
  resolver: {
    alias: {
      '@appname/shared/assets': path.resolve(__dirname, 'libs/shared/assets/src'),
    },
    assetExts: ['png', 'jpg', 'jpeg', 'svg'] // 确保RN能识别这些图片格式
  },
  watchFolders: [path.resolve(__dirname, 'libs')] // 监听共享库文件变化
};

const defaultConfig = getDefaultConfig(__dirname);
const mergedConfig = mergeConfig(defaultConfig, customConfig);

module.exports = nxMetroConfig(mergedConfig);

4. 组件中直接引用 #

现在就能用你期望的方式调用资源：

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

<Image source={image}/>

方案2：NX资产同步复制 #

1. 配置共享库的资产输出规则 #

修改libs/shared/assets/project.json，添加assets配置到build目标，让NX构建时把资源复制到可访问目录：

{
  "targets": {
    "build": {
      "executor": "@nx/js:tsc",
      "options": {
        "outputPath": "dist/libs/shared/assets",
        "main": "libs/shared/assets/src/index.ts",
        "tsConfig": "libs/shared/assets/tsconfig.lib.json",
        "assets": [
          {
            "input": "libs/shared/assets/src/assets", // 你的图片存放目录
            "glob": "**/*",
            "output": "./assets"
          }
        ]
      }
    }
  }
}

2. 让应用依赖共享库的构建 #

修改apps/appname/project.json，在build目标中添加依赖，确保构建应用时先同步共享资产：

{
  "targets": {
    "build": {
      "dependsOn": ["shared-assets:build"]
    }
  }
}

3. 引用同步后的资源 #

构建完成后，共享资产会被复制到dist/libs/shared/assets/assets，组件中可这样引用：

import image from '@appname/shared/assets/assets/image.png';
// 或用require方式
<Image source={require('@appname/shared/assets/assets/image.png')}/>

方案3：简化相对路径（临时过渡） #

在项目根目录的tsconfig.json（或jsconfig.json）中添加路径别名，减少冗长的相对路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["apps/appname/src/assets/*"],
      "@shared-assets/*": ["libs/shared/assets/*"]
    }
  }
}

同时需要同步修改metro.config.js的resolver.alias（参考方案1的Metro配置），之后组件中可这样引用：

import image from '@assets/image.png';
// 或
import image from '@shared-assets/image.png';

内容的提问来源于stack exchange，提问作者Victor Vaccaro