使用expo-router时，如何通过router.back()回传参数？

下面提供两种实用方案，解决扫码页面回传参数到原页面的问题：

方案一：利用路由 State 传递参数 #

无需额外依赖，直接借助 Expo Router 的路由状态实现参数回传

1. 修改原页面跳转代码 #

跳转时给目标页面传入空的路由 state（用于后续携带回传参数）：

<TouchableOpacity style={styles.qrButton} onPress={()=> {
  router.push('/rent-bike/qr-scanner', {})
}}>
  <Text style={styles.qrText}>Użyj kodu QR</Text>
</TouchableOpacity>

2. 扫码页面回传参数并返回 #

获取到扫码结果后，用 router.replace 回到原页面，同时把参数存入路由 state：

const handleBarCodeScanned = ({type, data}) => {
  setScanData(true)
  console.log(`data: ${data}`);
  console.log(`type: ${type}`);
  // 替换当前路由，携带参数返回原页面（替换成你的原页面实际路由）
  router.replace('/rent-bike/index', {
    scanResult: { type, data }
  })
};

3. 原页面读取回传参数 #

用 useFocusEffect 监听页面聚焦，实时读取路由 state 中的参数：

import { useRouter } from 'expo-router';
import { useFocusEffect } from '@react-navigation/native';
import { useState } from 'react';

export default function RentBikePage() {
  const router = useRouter();
  const [scanResult, setScanResult] = useState(null);

  useFocusEffect(() => {
    const result = router.state?.scanResult;
    if (result) {
      setScanResult(result);
      // 清空 state，避免重复读取
      router.setParams({ scanResult: null });
    }
  });

  return (
    <>
      {/* 原有页面内容 */}
      {scanResult && (
        <View>
          <Text>扫码类型：{scanResult.type}</Text>
          <Text>扫码数据：{scanResult.data}</Text>
        </View>
      )}
    </>
  );
}

方案二：全局状态管理（以 Zustand 为例） #

适合需要在多个页面共享数据的场景，更灵活

1. 安装并创建状态存储 #

先安装依赖：

npm install zustand

创建状态文件 store/scanStore.js：

import { create } from 'zustand';

export const useScanStore = create((set) => ({
  scanResult: null,
  setScanResult: (data) => set({ scanResult: data }),
  clearScanResult: () => set({ scanResult: null })
}));

2. 扫码页面更新全局状态 #

获取扫码结果后更新状态，再调用 router.back() 返回：

import { useScanStore } from '../store/scanStore';

const handleBarCodeScanned = ({type, data}) => {
  setScanData(true)
  console.log(`data: ${data}`);
  console.log(`type: ${type}`);
  // 更新全局状态
  useScanStore.getState().setScanResult({ type, data });
  router.back();
};

3. 原页面订阅状态 #

直接订阅全局状态，实时获取扫码结果：

import { useScanStore } from '../store/scanStore';
import { useEffect } from 'react';

export default function RentBikePage() {
  const scanResult = useScanStore((state) => state.scanResult);
  const clearScanResult = useScanStore((state) => state.clearScanResult);

  useEffect(() => {
    if (scanResult) {
      // 处理扫码结果
      console.log('收到扫码数据：', scanResult);
      // 清空状态，避免下次进入页面重复显示
      clearScanResult();
    }
  }, [scanResult, clearScanResult]);

  return (
    <>
      {/* 原有页面内容 */}
      {scanResult && (
        <View>
          <Text>扫码类型：{scanResult.type}</Text>
          <Text>扫码数据：{scanResult.data}</Text>
        </View>
      )}
    </>
  );
}

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