如何将React Native集成到现有React项目并复用代码？

一、基于Expo的集成方案（推荐，最小化配置） #

这是最省心的方式，Expo会帮你搞定大部分原生配置，直接在现有React项目中扩展RN能力：

1. 安装Expo核心依赖
   在现有项目根目录执行命令：

npm install expo react-native-web react-native
# 或者用yarn
yarn add expo react-native-web react-native

接着安装Expo的babel预设，确保RN代码能正常编译：

npm install --save-dev @babel/preset-react-native

然后修改项目根目录的babel.config.js（没有就新建）：

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-react-native'],
};

2. 抽离可复用的共享逻辑
   把现有React项目里的纯函数、工具类、状态管理代码（比如Redux store、工具函数）抽成独立的共享目录，比如src/shared/。注意：这些代码不能依赖web专属API（比如window、document），必须是纯JS逻辑，确保能在RN环境运行。

3. 配置双平台启动脚本
   修改package.json的scripts，添加Expo的启动命令，和原有web脚本共存：

"scripts": {
  "start": "react-scripts start", // 原web项目启动命令
  "native": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios"
}

4. 编写RN入口和适配组件
   在项目根目录创建RN专属的入口文件App.native.js，导入共享逻辑和RN组件：

import { View, Text } from 'react-native';
import { calculateTotal } from './src/shared/utils'; // 复用现有函数

export default function App() {
  const total = calculateTotal([10, 20, 30]);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>计算结果：{total}</Text>
    </View>
  );
}

如果需要复用现有UI组件，要做平台判断适配：

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

const CommonButton = ({ onPress, children }) => {
  if (Platform.OS === 'web') {
    return <button onClick={onPress}>{children}</button>;
  }
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 10, backgroundColor: '#007AFF' }}>
      <Text style={{ color: 'white' }}>{children}</Text>
    </TouchableOpacity>
  );
};

二、原生React Native集成方案（Expo不适用时的备选） #

如果你的项目需要自定义原生模块，Expo的预配置无法满足，可以用原生RN集成：

1. 在现有项目中初始化RN子模块
   在项目根目录执行命令，创建一个独立的RN子目录（比如rn/）：

npx react-native init RNModule --directory ./rn

2. 共享逻辑的跨目录引用
   同样把现有项目的共享逻辑放到src/shared/，然后在RN子模块中通过相对路径引用：

// rn/App.js
import { formatDate } from '../../src/shared/date-utils';

3. 用工作空间管理依赖
   为了避免重复安装依赖，用npm/yarn工作空间把现有web项目和RN子模块关联起来：

• 在项目根目录的package.json中添加：

"workspaces": [".", "./rn"]

• 删除RN子模块的node_modules，重新执行npm install，两个项目会共享依赖。

4. 分别启动双平台

• web项目：执行原有启动命令npm start
• RN项目：进入rn/目录，执行npx react-native run-android或npx react-native run-ios

三、核心注意事项 #

• 共享代码必须跨平台兼容：绝对不能包含web或RN专属的API，只保留纯JS逻辑、无平台依赖的工具函数、状态管理代码。
• 状态管理复用：如果用Redux、Zustand等状态库，直接把store文件放到共享目录，web和RN项目共用同一个store，实现状态同步（如果业务需要）。
• 组件复用限制：只有纯UI组件且无平台专属元素的才能直接复用，否则必须通过Platform判断做适配。

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