如何在NX monorepo的React Native构建中引入库内资源？

方法一：配置Metro打包器包含Libs资源 #

1. 打开apps/my-app/metro.config.js，修改配置让Metro监听并处理libs目录下的资源：

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

const config = {};

// 添加libs目录到监听文件夹
config.watchFolders = [path.resolve(__dirname, '../../libs')];

// 配置资源解析逻辑
config.resolver = {
  extraNodeModules: new Proxy({}, {
    get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
  }),
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

2. 在apps/my-app/project.json的build目标配置中添加libs的资源路径：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          "../../libs/my-lib/src/assets"
        ]
      }
    }
  }
}

方法二：在Lib库中统一导出资源 #

在libs/my-lib/src/index.ts中导出图片资源，避免直接引用路径的问题：

export const AppLogo = require('./assets/app_logo.png');

然后在WelcomeScreen.tsx中直接引入导出的变量：

import { AppLogo } from '@your-workspace/my-lib';

// 组件内使用
<Image source={AppLogo} />

方法三：配合路径别名使用绝对引用 #

在apps/my-app/tsconfig.json中配置路径别名，简化引用路径：

{
  "compilerOptions": {
    "paths": {
      "@your-workspace/my-lib/*": ["../../libs/my-lib/src/*"]
    }
  }
}

之后在WelcomeScreen.tsx中直接引用：

import AppLogo from '@your-workspace/my-lib/assets/app_logo.png';

<Image source={AppLogo} />

验证操作 #

1. 清理缓存：执行npx react-native start --reset-cache
2. 重新打包应用：运行nx run my-app:android或nx run my-app:ios

内容的提问来源于stack exchange，提问作者Sennen Randika