如何在Expo中为iOS和Android集成Firebase Remote Config

已完成操作确认 #

• 安装了@react-native-firebase/app和@react-native-firebase/remote-config，package.json已记录相关依赖
• 已将google-services.json（Android）和GoogleService-Info.plist（iOS）配置到app.json中

核心问题解决 #

1. 无需生成独立iOS/Android文件夹的配置方案 #

Expo Managed Workflow下不需要 eject 生成原生文件夹，你已完成的app.json配置方式完全可行，只需确保配置文件路径正确即可，示例如下：

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    }
  }
}

如果配置文件放在assets目录下，路径改为./assets/google-services.json即可，无需额外操作原生文件夹。

2. config.js 在 Remote Config 中的具体用法 #

config.js主要用于封装Remote Config的初始化、参数获取、云端拉取等逻辑，避免重复代码，具体示例如下：

// config.js
import remoteConfig from '@react-native-firebase/remote-config';

// 初始化Remote Config，设置本地默认值与缓存规则
export const initRemoteConfig = async () => {
  // 设置本地默认参数，云端未返回配置时使用
  await remoteConfig().setDefaults({
    app_theme: 'light',
    enable_new_feature: false,
    welcome_msg: 'Welcome!'
  });

  // 配置缓存过期时间：开发环境设为0（实时拉取），生产环境设为3600000毫秒（1小时）
  const settings = {
    minimumFetchIntervalMillis: __DEV__ ? 0 : 3600000
  };
  remoteConfig().setConfigSettings(settings);
};

// 封装参数获取方法，自动解析对应类型
export const getRemoteConfig = (key) => {
  const value = remoteConfig().getValue(key);
  switch (value.getType()) {
    case 'string':
      return value.asString();
    case 'boolean':
      return value.asBoolean();
    case 'number':
      return value.asNumber();
    default:
      return null;
  }
};

// 主动拉取并激活云端最新配置
export const refreshRemoteConfig = async () => {
  try {
    await remoteConfig().fetchAndActivate();
    console.log('Remote Config 更新成功');
  } catch (err) {
    console.error('Remote Config 拉取失败:', err);
  }
};

3. 项目中实际使用流程 #

在App入口文件中调用初始化逻辑即可：

import { initRemoteConfig, refreshRemoteConfig, getRemoteConfig } from './config';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    const setupConfig = async () => {
      await initRemoteConfig();
      await refreshRemoteConfig();
      // 获取并使用配置
      const theme = getRemoteConfig('app_theme');
      const isNewFeatureOpen = getRemoteConfig('enable_new_feature');
      console.log('当前主题:', theme);
      console.log('新功能开关:', isNewFeatureOpen);
    };
    setupConfig();
  }, []);

  // 页面渲染逻辑...
}

注意事项 #

• 开发环境下，需确保Firebase控制台的Remote Config配置已发布（草稿状态无法被客户端获取）
• Expo Go中测试时，修改配置后可能需要重启App加载新内容；若需更贴近原生的测试，可执行expo prebuild --no-install生成临时原生文件，不会创建永久的iOS/Android文件夹

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