React Native中页面导航时如何传递多个参数？

嗨，我来帮你搞定这个问题～你已经掌握了单个参数的传递方法，要传多个参数其实也很简单，有两种常用的方式，我给你一步步讲清楚：

方式一：扩展路径参数（把两个参数都放进URL路径里） #

如果这两个参数都是页面必需的核心信息，你可以修改路由文件命名，把第二个参数也做成动态占位符。比如把原来的/item/[id].jsx改成/item/[id]/[name].jsx（如果是Expo Router的app目录结构，就是app/item/[id]/[name].jsx）。

然后在跳转的时候，直接把两个参数拼进URL里：

// 假设你在列表页已经拿到了id和name变量
router.push(`/item/${id}/${name}`);

目标页面获取参数的方式和之前几乎一样，useLocalSearchParams会自动解析这两个路径参数：

import { View } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

const ItemDetailsScreen = () => {
    // 直接解构出id和name
    const { id, name } = useLocalSearchParams();
    return (
        <View>
            {/* 在这里就能使用id和name啦 */}
        </View>
    );
};

export default ItemDetailsScreen;

方式二：使用查询参数（更灵活的可选参数传递） #

如果name是可选参数，或者你不想修改现有的路由结构，那用查询参数就更合适了。这种方式不需要改你的/item/[id].jsx文件，跳转的时候把name作为查询参数附加在URL后面就行。

跳转代码有两种写法：

// 写法1：用对象形式，更清晰
router.push({
  pathname: `/item/${id}`,
  params: { name: name }
});

// 写法2：用模板字符串，注意如果name有特殊字符（比如空格、中文），要用encodeURIComponent编码
router.push(`/item/${id}?name=${encodeURIComponent(name)}`);

目标页面获取参数的方式完全不变，还是用useLocalSearchParams，它会同时解析路径参数和查询参数：

const { id, name } = useLocalSearchParams();

小提醒 #

• 如果参数里包含特殊字符（比如空格、中文、&这类符号），一定要用encodeURIComponent编码，避免URL出错，获取的时候不需要手动解码，useLocalSearchParams会自动处理。
• 路径参数适合必填的核心标识，查询参数适合可选的附加信息，你可以根据自己的需求选择～

备注：内容来源于stack exchange，提问作者Bawenang Rukmoko Pardian Putra