能否将Firebase推送通知消息存储到AsyncStorage中？后台场景如何实现？

该需求完全可以实现，你遇到的存储失效问题是两个核心原因导致的：

1. 常规AsyncStorage默认不支持跨JS上下文/多进程访问，Firebase后台消息处理函数运行在独立于主App的执行环境中，无法访问主App上下文内的AsyncStorage实例
2. 你的代码未给异步存储操作添加await关键字，而后台进程生命周期极短，异步操作未完成就被系统回收，最终存储失败

• 第一步：替换存储方案为支持多进程/跨上下文的存储库，优先选择react-native-mmkv，它是基于C++实现的高性能存储，原生支持多进程访问，不需要依赖主App上下文
• 第二步：修改后台消息处理函数逻辑，补全异步等待、异常捕获、消息追加逻辑，避免覆盖历史消息
• 第三步：在前台消息列表页读取存储的消息数据渲染即可

安装依赖 #

npm install react-native-mmkv
# 或
yarn add react-native-mmkv

入口文件后台处理逻辑（index.js） #

import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';
import { MMKV } from 'react-native-mmkv'

import { name as appName } from './app.json';

// 初始化MMKV，开启多进程支持（安卓必填，iOS无影响）
const storage = new MMKV({
  id: 'notification_storage',
  path: 'notifications',
  multiProcess: true
})

/**
 * Background Received Push Notification Firebase
 */
messaging().setBackgroundMessageHandler(async remoteMessage => {
  try {
    // 读取已有历史消息
    const existingNotifications = storage.getString('@myapp:notifications')
    const notifications = existingNotifications ? JSON.parse(existingNotifications) : []
    // 追加新消息到列表头部
    notifications.unshift({
      ...remoteMessage,
      receiveTime: Date.now()
    })
    // 写入更新后的消息列表
    storage.set('@myapp:notifications', JSON.stringify(notifications))
  } catch (e) {
    // 捕获异常避免后台进程崩溃
    console.log('Background storage error: ', e)
  }
});

AppRegistry.registerComponent(appName, () => App);

前台消息列表页逻辑 #

import { MMKV } from 'react-native-mmkv'
import { useState, useEffect } from 'react'
import { View, Text, FlatList, StyleSheet } from 'react-native'

const storage = new MMKV({
  id: 'notification_storage',
  path: 'notifications',
  multiProcess: true
})

const NotificationList = () => {
  const [notifications, setNotifications] = useState([])

  useEffect(() => {
    // 进入页面时读取全量消息
    const notiStr = storage.getString('@myapp:notifications')
    if (notiStr) {
      setNotifications(JSON.parse(notiStr))
    }
  }, [])

  return (
    <FlatList
      data={notifications}
      keyExtractor={(_, index) => String(index)}
      renderItem={({item}) => <View style={styles.item}>
        <Text style={styles.title}>{item.notification?.title || '无标题'}</Text>
        <Text style={styles.body}>{item.notification?.body || '无内容'}</Text>
        <Text style={styles.time}>{new Date(item.receiveTime).toLocaleString()}</Text>
      </View>}
    />
  )
}

const styles = StyleSheet.create({
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4
  },
  body: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4
  },
  time: {
    fontSize: 12,
    color: '#999'
  }
})

export default NotificationList

• 如果你仍要使用AsyncStorage，需要额外配置原生端多进程支持，安卓端需要在AndroidManifest.xml中给AsyncStorage的ContentProvider添加android:multiprocess="true"属性，但整体稳定性不如MMKV，更推荐使用MMKV方案
• 后台消息处理函数中不要执行耗时超过10s的操作，否则会被系统强制回收

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