Expo项目本地共享React Native通用代码的实现方案咨询

阿华AIGC实验室

2026-4-7

当然可以！完全不用把通用代码发布到npm、GitHub这类平台，咱们直接在本地通过工作区关联或者本地文件依赖的方式，就能让两个Expo项目共享组件、服务、hooks这些通用功能。结合你给出的项目创建信息，我给你梳理下具体的实现步骤和注意事项：

一、先规划目录结构

咱们把通用代码单独放在一个独立的项目里，和两个Expo项目同级，这样管理起来更清晰，示例总结构如下：

my-workspace/
├─ common-code/       # 存放所有通用代码的项目
│  ├─ src/
│  │  ├─ components/  # 共享组件（比如Button、Card）
│  │  ├─ hooks/       # 自定义共享hooks
│  │  └─ services/    # 共享业务服务（比如API请求封装）
│  ├─ package.json
│  └─ tsconfig.json
├─ expo-app-1/        # 你的第一个Expo项目（就是你创建的那种结构）
└─ expo-app-2/        # 第二个Expo项目

二、创建并配置通用代码项目

新建common-code文件夹，初始化项目：

mkdir common-code && cd common-code
npm init -y
npm install typescript --save-dev
npx tsc --init

在common-code里创建src目录，然后按照需求添加components、hooks、services等文件夹，编写你的通用代码。
调整common-code/tsconfig.json的关键配置，确保和Expo项目兼容：

{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

三、配置Expo项目引用本地通用代码

因为你已经创建了Expo TypeScript项目，并且安装了@react-native/metro-config等依赖，接下来只需要两步：

添加本地依赖：
打开每个Expo项目的package.json，在dependencies里添加对common-code的本地引用：

"dependencies": {
  // 保留原有所有依赖...
  "common-code": "file:../common-code"
}

然后在Expo项目根目录运行npm install，这样项目就会把本地的通用代码项目作为依赖加载。

配置Metro和TypeScript：

你已经安装了@react-native/metro-config，现在在Expo项目根目录新建metro.config.js，内容如下：

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

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

修改Expo项目的tsconfig.json，在compilerOptions里添加路径映射，让TypeScript能正确识别通用代码：

"compilerOptions": {
  // 保留原有配置...
  "baseUrl": ".",
  "paths": {
    "common-code/*": ["../common-code/src/*"]
  }
}

四、在Expo项目中使用通用代码

现在你就可以像使用普通npm包一样，在Expo项目的App.tsx或者其他文件里导入通用代码了：

import { SharedPrimaryButton } from 'common-code/components/SharedPrimaryButton';
import { useFetchData } from 'common-code/hooks/useFetchData';

export default function App() {
  const { data, loading } = useFetchData('https://api.example.com/data');
  
  return (
    <View style={styles.container}>
      <SharedPrimaryButton onPress={() => console.log('点击共享按钮')}>
        我是共享按钮
      </SharedPrimaryButton>
      {loading && <Text>加载中...</Text>}
    </View>
  );
}