React Navigation：如何在主屏幕与模态框间共享数据

1. 实现独立内存缓存模块 #

自己写一个极简的内存缓存工具，专门存话题数据。话题页面加载完完整数据后，直接把数据以话题ID为key存入缓存；打开Modal时，直接从缓存里按ID取数据，不用再发请求。

示例代码：

// utils/topicCache.js
const cache = new Map();

// 存入缓存
export const setTopicCache = (topicId, data) => {
  cache.set(topicId, data);
};

// 获取缓存
export const getTopicCache = (topicId) => {
  return cache.get(topicId);
};

// 清理单条缓存
export const clearTopicCache = (topicId) => {
  cache.delete(topicId);
};

在话题页数据加载完成后调用setTopicCache存数据，Modal里直接用getTopicCache(route.params.topicId)拿数据就行，完全脱离状态管理和参数传递的限制。

2. 借助React Navigation容器挂载全局数据 #

如果用的是React Navigation v5+，可以在导航容器里挂载一个全局缓存对象，所有页面和Modal都能通过导航的上下文访问到。

示例代码：

// App.js
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import React from 'react';

const globalData = {
  topicCache: new Map()
};

export default function App() {
  return (
    <NavigationContainer
      theme={{
        ...DefaultTheme,
        globalData
      }}
    >
      {/* 你的导航结构 */}
    </NavigationContainer>
  );
}

// 在Modal中获取数据
import { useTheme } from '@react-navigation/native';

function TopicModal({ route }) {
  const { globalData } = useTheme();
  const topicData = globalData.topicCache.get(route.params.topicId);
  
  // 渲染数据逻辑
}

这里利用主题对象挂载全局缓存，属于巧借现有API实现全局数据共享，不用额外引入状态管理库。

3. 全局变量（小型项目应急用） #

直接在项目入口文件声明一个全局变量，比如global.topicCache = new Map();，话题页和Modal里直接读写这个变量。这种方式简单粗暴，但不利于大型项目的代码维护，只适合小型项目快速解决问题。

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