React Native Yarn Workspace单体仓库共享组件无法正常使用求助

核心问题分析 #

出现与useState相关的错误、导入的组件是函数但JSX语法报错，本质大概率是React实例不统一或组件编译/导出配置异常，以下是针对性解决步骤：

1. 统一React/React Native实例（最常见原因） #

Monorepo中多个包各自安装React会导致实例冲突，hooks依赖单一React实例运行，必须强制共享包使用宿主App的React：

• 在共享包的package.json中，将react和react-native移至peerDependencies，删除dependencies中的对应项：

  {
    "peerDependencies": {
      "react": "^18.0.0",
      "react-native": "^0.72.0"
    }
  }
  

• 在RN App的metro.config.js中，添加resolver.extraNodeModules指向宿主的React包，避免重复加载：

  const path = require('path');
  const extraNodeModules = {
    'react': path.resolve(__dirname, './node_modules/react'),
    'react-native': path.resolve(__dirname, './node_modules/react-native')
  };
  const watchFolders = [
    path.resolve(__dirname, '../../packages/shared'), // 直接监听共享包源码目录，而非node_modules副本
    path.resolve(__dirname, './node_modules')
  ];
  
  module.exports = {
    resolver: { extraNodeModules },
    watchFolders,
    // 其他原有配置
  };
  

2. 检查共享组件的导出方式 #

确保组件导出未被错误包装，且使用正确的React实例：

• 错误示例（HOC或包装函数导致组件实例异常）：

  // 错误：如果withSomething未正确传递React上下文，会导致hooks报错
  export default withSomething(Button);
  

• 正确示例：

  import React from 'react';
  import { TouchableOpacity, Text } from 'react-native';
  
  const Button = ({ title, onPress }) => {
    const [isPressed, setIsPressed] = React.useState(false);
    return (
      <TouchableOpacity onPress={onPress} onPressIn={() => setIsPressed(true)} onPressOut={() => setIsPressed(false)}>
        <Text style={{ opacity: isPressed ? 0.7 : 1 }}>{title}</Text>
      </TouchableOpacity>
    );
  };
  
  export default Button;
  // 或命名导出：export { Button };
  

3. 调整Metro监听目录顺序 #

将共享包源码目录放在宿主node_modules之前，确保Metro优先加载未编译的源码，避免使用旧的编译副本：

watchFolders: [
  path.resolve(__dirname, '../../packages/shared'), // 共享包源码根目录
  path.resolve(__dirname, './node_modules'), // 宿主App的依赖目录
],

4. 修正TypeScript/Babel编译配置 #

• 共享包的tsconfig.json确保JSX配置适配RN环境：

  {
    "compilerOptions": {
      "jsx": "react-native", // React 17+可改用"react-jsx"
      "esModuleInterop": true,
      "moduleResolution": "node",
      "skipLibCheck": true
    }
  }
  

• 禁止在共享包中预编译React/React Native代码，完全交由宿主App的Metro处理编译，避免编译产物与宿主环境不兼容。

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

RN缓存极易引发异常，执行以下命令彻底清理：

# 重置Metro缓存
npx react-native start --reset-cache

# iOS环境额外操作
cd ios && pod deintegrate && pod install && cd ..

# Android环境额外操作
cd android && ./gradlew clean && cd ..

内容的提问来源于stack exchange，提问作者Nemanja Pavlović