如何在expo-router中通过router.back()返回时传递参数？

expo-router 的 router.back() 本身不支持直接携带参数返回，下面是两种可行的实现方式：

方法1：全局状态管理（推荐） #

用全局状态共享数据是最可靠的方案，这里以轻量状态库 Zustand 为例：

1. 创建全局状态存储

// stores/navigationStore.js
import { create } from 'zustand';

export const useNavigationStore = create((set) => ({
  returnData: null,
  setReturnData: (data) => set({ returnData: data }),
  clearReturnData: () => set({ returnData: null }),
}));

2. 在 ScreenB 中设置返回数据并返回

import { useNavigationStore } from '../stores/navigationStore';
import { router } from 'expo-router';
import { Button } from 'react-native';

const ScreenB = () => {
  const setReturnData = useNavigationStore(state => state.setReturnData);

  const handleBack = () => {
    // 把要传递给ScreenA的数据存到全局状态
    setReturnData({ result: '来自ScreenB的数据', id: 123 });
    router.back();
  };

  return <Button title="返回ScreenA" onPress={handleBack} />;
};

3. 在 ScreenA 中监听并处理返回数据

import { useNavigationStore } from '../stores/navigationStore';
import { useEffect } from 'react';

const ScreenA = () => {
  const returnData = useNavigationStore(state => state.returnData);
  const clearReturnData = useNavigationStore(state => state.clearReturnData);

  useEffect(() => {
    if (returnData) {
      // 这里处理从ScreenB返回的数据
      console.log('收到返回数据：', returnData);
      // 处理完后清空状态，避免下次进入页面重复触发
      clearReturnData();
    }
  }, [returnData]);

  // 原有导航到ScreenB的代码...
};

方法2：结合导航焦点事件与本地存储 #

利用 React Navigation 的 focus 事件，配合 AsyncStorage 临时存储数据：

1. 在 ScreenB 返回前存储数据

import { router } from 'expo-router';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Button } from 'react-native';

const handleBack = async () => {
  const returnData = { status: 'success', message: '操作完成' };
  await AsyncStorage.setItem('screenBReturnData', JSON.stringify(returnData));
  router.back();
};

2. 在 ScreenA 中监听页面焦点读取数据

import { useFocusEffect } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useCallback } from 'react';

const ScreenA = () => {
  useFocusEffect(
    useCallback(() => {
      const getReturnData = async () => {
        const rawData = await AsyncStorage.getItem('screenBReturnData');
        if (rawData) {
          const returnData = JSON.parse(rawData);
          console.log('返回数据：', returnData);
          // 读取后删除存储的数据，防止重复读取
          await AsyncStorage.removeItem('screenBReturnData');
        }
      };
      getReturnData();
    }, [])
  );

  // 原有代码...
};

注意事项 #

• 不要用 router.push 返回，这会在导航栈中新增页面，不符合“返回上一页”的预期行为。
• 全局状态管理适合大多数常规场景，代码更简洁；本地存储适合需要跨会话保留数据的场景，但务必记得清理存储内容。

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