如何使用Expo Router将同一参数传递至多个React Native页面？

你当前的写法存在问题：Expo Router的router.push()一次只能发起单次导航操作，传入两个路由对象的写法无效，它只会处理第一个参数，因此searchResultMap页面无法接收到参数。

以下是几种可行的实现方案，可根据你的实际场景选择：

方案一：全局状态管理（推荐） #

通过全局状态存储guests参数，两个页面直接从状态中读取，无需依赖路由传递。这里以轻量状态库Zustand为例：

1. 安装Zustand：

npm install zustand

2. 创建状态存储文件：

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

export const useGuestStore = create((set) => ({
  guests: 0,
  setGuests: (count) => set({ guests: count }),
}));

3. 在点击按钮的页面更新状态并导航：

import { useRouter } from 'expo-router';
import { useGuestStore } from '../stores/guestStore';

const router = useRouter();
const setGuests = useGuestStore(state => state.setGuests);

<Pressable 
  onPress={() => {
    const guestCount = adults + children;
    // 先把参数存入全局状态
    setGuests(guestCount);
    // 导航到目标页面（任选其一，另一页面可直接读取状态）
    router.push('/home/explore/searchResult');
  }}
  style={{marginBottom: 20, alignItems: 'center', justifyContent: 'center', backgroundColor: '#f15454',height: 50, marginHorizontal: 30, borderRadius: 10 }}
>
  <Text style={{fontSize: 20, color: 'white', fontWeight: 'bold'}}>Search</Text>
</Pressable>

4. 在searchResult和searchResultMap页面读取参数：

import { useGuestStore } from '../stores/guestStore';

const guests = useGuestStore(state => state.guests);
// 直接使用guests变量即可

方案二：本地存储（AsyncStorage） #

将参数存入本地存储，两个页面从本地读取：

1. 在点击按钮的页面存储参数：

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

const router = useRouter();

<Pressable 
  onPress={async () => {
    const guestCount = adults + children;
    // 存入本地存储
    await AsyncStorage.setItem('guests', guestCount.toString());
    router.push('/home/explore/searchResult');
  }}
  style={{marginBottom: 20, alignItems: 'center', justifyContent: 'center', backgroundColor: '#f15454',height: 50, marginHorizontal: 30, borderRadius: 10 }}
>
  <Text style={{fontSize: 20, color: 'white', fontWeight: 'bold'}}>Search</Text>
</Pressable>

2. 在目标页面读取参数：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SearchResult = () => {
  const [guests, setGuests] = useState(0);

  useEffect(() => {
    const getGuestCount = async () => {
      const count = await AsyncStorage.getItem('guests');
      if (count) setGuests(parseInt(count));
    };
    getGuestCount();
  }, []);

  return <Text>Guests: {guests}</Text>;
};

方案三：父路由传递参数（适合同层级子页面） #

如果searchResult和searchResultMap都是/home/explore的子页面，可将参数传递给父路由，两个子页面共享读取：

1. 点击按钮时导航到父路由并携带参数：

<Pressable 
  onPress={() => {
    const guestCount = adults + children;
    // 先传递参数到父路由
    router.push({
      pathname: '/home/explore',
      params: { guests: guestCount }
    });
    // 再导航到子页面，参数会被继承
    router.push('/home/explore/searchResult');
  }}
  style={{marginBottom: 20, alignItems: 'center', justifyContent: 'center', backgroundColor: '#f15454',height: 50, marginHorizontal: 30, borderRadius: 10 }}
>
  <Text style={{fontSize: 20, color: 'white', fontWeight: 'bold'}}>Search</Text>
</Pressable>

2. 在子页面读取父路由参数：

import { useLocalSearchParams } from 'expo-router';

const { guests } = useLocalSearchParams();
// 参数为字符串类型，需转为数字
const guestCount = parseInt(guests);

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