在React Native(Expo)跨端应用中使用Firebase的方案咨询

1. 是否需要拆分为Web和移动端独立代码库？ #

不需要。借助React Native的平台差异化机制（条件判断、平台专属文件），完全可以在同一代码库中同时兼容Web（使用Firebase Web SDK）和移动端（使用react-native-firebase），无需拆分代码库。

2. 如何让两个Firebase库共存于同一应用？ #

react-native-firebase确实无法在RN Web环境下编译，但可以通过以下两种方式实现共存：

• 条件导入：在代码中通过Platform.OS或环境变量判断当前运行环境，分别导入对应SDK。示例代码：

  let FirebaseAuth;
  if (Platform.OS === 'web') {
    const { getAuth } = require('firebase/auth');
    FirebaseAuth = getAuth();
  } else {
    const auth = require('@react-native-firebase/auth');
    FirebaseAuth = auth.default();
  }
  

• 平台专属文件：利用React Native的文件命名规则，创建firebase-service.web.js（Web端使用Firebase Web SDK实现）和firebase-service.native.js（移动端使用react-native-firebase实现），导入时直接写import FirebaseService from './firebase-service'，RN会自动根据当前平台加载对应文件。

3. 推荐的代码结构设计 #

核心思路是抽象Firebase服务层，将平台相关的实现封装到底层，上层业务代码无需关心具体使用哪个SDK。示例结构如下：

src/
├── services/
│   ├── firebase/
│   │   ├── auth/
│   │   │   ├── auth.web.js    # Web端Auth功能实现（基于Firebase Web SDK）
│   │   │   ├── auth.native.js # 移动端Auth功能实现（基于react-native-firebase）
│   │   │   └── index.js       # 统一导出，自动匹配平台文件
│   │   ├── database/
│   │   │   ├── database.web.js
│   │   │   ├── database.native.js
│   │   │   └── index.js
│   │   └── index.js           # 统一导出所有Firebase服务
│   └── ...
├── components/
│   └── ... # 业务组件直接调用统一的Firebase服务，无需区分平台
└── App.js

在auth/index.js中只需简单导出：

export * from './auth';

React Native会自动根据平台选择对应文件。上层组件使用时直接导入：

import { signInWithPhoneNumber } from '../services/firebase/auth';

这种结构让业务代码与平台SDK完全解耦，后续更换或调整SDK实现时，无需修改业务逻辑。

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