React Native多应用共享组件配置失败求助

问题分析 #

你的目录结构是标准的monorepo布局，但React Native的Metro打包器默认不会解析跨包的相对路径，同时你的导入路径、Metro配置、共享包的package.json配置可能存在问题，另外你提供的Button.tsx代码也存在语法错误。

分步解决方案 #

1. 修复共享组件的语法错误 #

你的Button.tsx组件缺少根容器，直接返回{text}会导致React渲染错误，修改为：

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const Button = ({ text, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.buttonContainer}>
      <Text style={styles.buttonText}>{text}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default Button;

2. 配置Yarn Workspaces（推荐方案） #

Yarn Workspaces能让monorepo内的包互相识别，无需复杂的路径配置：

• 在根目录（Outer Folder）创建package.json：

  {
    "name": "rn-monorepo-root",
    "private": true,
    "workspaces": [
      "packages/*"
    ]
  }
  

• 在packages/shared目录下创建package.json，将共享组件声明为独立包：

  {
    "name": "@shared/components",
    "version": "1.0.0",
    "main": "Button.tsx",
    "peerDependencies": {
      "react": "*",
      "react-native": "*"
    }
  }
  

• 在packages/ReactNativeApp1/package.json中添加共享包依赖：

  {
    "dependencies": {
      "@shared/components": "1.0.0"
    }
  }
  

• 运行yarn install安装依赖，之后在App.tsx中通过包名导入：

  import Button from '@shared/components';
  

3. 配置Metro打包器（兼容相对路径） #

如果坚持使用相对路径导入，需要修改ReactNativeApp1/metro.config.js，让Metro监听共享目录并解析跨包路径：

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

const defaultConfig = getDefaultConfig(__dirname);
const customConfig = {
  resolver: {
    watchFolders: [
      // 让Metro监听共享组件目录
      path.resolve(__dirname, '../shared'),
    ],
    // 确保模块解析能找到跨包依赖
    nodeModulesPaths: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, '../node_modules'),
    ],
  },
};

module.exports = mergeConfig(defaultConfig, customConfig);

4. 验证导入路径正确性 #

确认App.tsx的位置：如果App.tsx在packages/ReactNativeApp1根目录，那么../shared/Button的路径是正确的；如果App.tsx在ReactNativeApp1/src子目录，路径需要改为../../shared/Button。

5. 清理缓存并重启服务 #

执行以下命令彻底清理缓存，避免旧配置干扰：

npx react-native start --reset-cache

之后重新运行npx react-native run-android或npx react-native run-ios。

额外检查点 #

• 确保文件名大小写一致（Windows系统不区分大小写，但Metro可能严格校验）
• 确认shared目录下没有嵌套子目录，或导入路径对应正确的层级
• 如果使用TypeScript，根目录需配置tsconfig.json，添加共享目录到include数组：

  {
    "compilerOptions": {},
    "include": [
      "packages/**/*"
    ]
  }
  

内容的提问来源于stack exchange，提问作者Justin Hughes