如何在React Native Expo中正确初始化@firebase的Firebase Analytics并解决警告？

官方@firebase/analytics在React Native环境下默认依赖浏览器Cookie，我们可以通过条件初始化和自定义存储适配来绕过限制，实现类似rnfirebase的兼容效果：

1. 用isSupported()做条件初始化 #

按照警告提示，先判断环境是否支持，仅在兼容环境初始化Analytics，避免触发警告：

import { initializeApp } from '@firebase/app';
import { getAnalytics, isSupported } from '@firebase/analytics';

const firebaseConfig = { /* 你的Firebase配置 */ };
const app = initializeApp(firebaseConfig);

// 条件初始化Analytics
let analytics;
isSupported().then(supported => {
  if (supported) {
    analytics = getAnalytics(app);
  } else {
    // 提供空实现避免后续调用报错
    analytics = {
      logEvent: () => Promise.resolve(),
      setUserProperties: () => Promise.resolve(),
      // 补充你需要用到的其他Analytics方法空实现
    };
  }
});

export { analytics };

2. 配置自定义存储替代Cookie（核心解决Cookie缺失问题） #

官方库允许通过settings配置自定义存储，我们可以用React Native的本地存储方案模拟Cookie功能：

步骤1：安装存储依赖 #

Expo环境优先使用安全存储：

npx expo install expo-secure-store

也可以用社区版异步存储：

npm install @react-native-async-storage/async-storage

步骤2：实现存储适配器 #

创建适配Firebase要求的存储对象，用本地存储替代Cookie：

import * as SecureStore from 'expo-secure-store';
// 若用AsyncStorage则替换为：import AsyncStorage from '@react-native-async-storage/async-storage';

const customStorage = {
  getItem: async (key) => {
    try {
      return await SecureStore.getItemAsync(key);
      // AsyncStorage版本：return await AsyncStorage.getItem(key);
    } catch (e) {
      return null;
    }
  },
  setItem: async (key, value) => {
    try {
      await SecureStore.setItemAsync(key, value);
      // AsyncStorage版本：await AsyncStorage.setItem(key, value);
    } catch (e) { /* 忽略存储错误，不影响初始化 */ }
  },
  removeItem: async (key) => {
    try {
      await SecureStore.deleteItemAsync(key);
      // AsyncStorage版本：await AsyncStorage.removeItem(key);
    } catch (e) { /* 忽略删除错误 */ }
  }
};

步骤3：传入自定义存储初始化Analytics #

在环境支持的情况下，初始化时注入自定义存储：

isSupported().then(supported => {
  if (supported) {
    analytics = getAnalytics(app, {
      settings: {
        storage: customStorage
      }
    });
  } else {
    // 空实现同上
  }
});

3. 验证效果 #

配置完成后重启Expo应用，警告会消失，Analytics的事件上报功能可正常使用（注意：React Native环境下自动页面跟踪需手动实现，部分浏览器专属功能仍受限）。

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