如何在React Native Expo中通过Expo Router实现跨页传值与页面复用

1. 修改跳转链接，传递日期和Plan Name #

在createplanhome组件中，将原来指向独立页面的Link改为统一指向单个动态页面，通过查询参数传递选中的日期和用户输入的Plan Name：

import { Link } from 'expo-router';
import { useState } from 'react';
import { View, Image, Text, TextInput, StyleSheet } from 'react-native';

export default function CreatePlanHome() {
    const [name, setName] = useState('');
    return (
        <View style={styles.container}>
            <View style={styles.columnContainer}>
                <Image source={require('./assets/logo.png')} style={styles.image} />
                <Text style={styles.nameText}>Plan Name:</Text>
                <TextInput 
                    style={styles.input} 
                    placeholder='e.g. Push Pull Legs'
                    onChangeText={(val) => setName(val)}
                />
                {/* 统一指向viewday页面并传递参数 */}
                <Link href={`/pages/viewday?day=Monday&planName=${name}`} style={styles.buttons}>Monday</Link>
                <Link href={`/pages/viewday?day=Tuesday&planName=${name}`} style={styles.buttons}>Tuesday</Link>
                <Link href={`/pages/viewday?day=Wednesday&planName=${name}`} style={styles.buttons}>Wednesday</Link>
                <Link href={`/pages/viewday?day=Thursday&planName=${name}`} style={styles.buttons}>Thursday</Link>
                <Link href={`/pages/viewday?day=Friday&planName=${name}`} style={styles.buttons}>Friday</Link>
            </View>
        </View>
    );
}

// 保留原有样式定义
const styles = StyleSheet.create({
    container: { /* 你的容器样式 */ },
    columnContainer: { /* 你的列容器样式 */ },
    image: { /* 你的图片样式 */ },
    nameText: { /* 你的文本样式 */ },
    input: { /* 你的输入框样式 */ },
    buttons: { /* 你的按钮样式 */ }
});

2. 创建单个动态页面，接收并展示参数 #

删除原有的viewmonday、viewtuesday等独立页面，新建viewday.js页面，使用Expo Router的useLocalSearchParams钩子获取传递的参数，动态渲染内容：

import { useLocalSearchParams } from 'expo-router';
import { View, Image, Text, StyleSheet } from 'react-native';

export default function ViewDay() {
    // 从URL查询参数中获取日期和Plan Name
    const { day, planName } = useLocalSearchParams();
    
    return (
        <View style={styles.container}>
            <Image source={require('./assets/logo.png')} style={styles.image} />
            <View style={styles.columnContainer}>
                {/* 动态显示选中的日期 */}
                <Text style={styles.nameText}>{day}</Text>
                {/* 动态显示Plan Name（可选：判断存在再渲染） */}
                {planName && (
                    <Text style={styles.planText}>当前计划：{planName}</Text>
                )}
                {/* 此处可添加该日期对应的其他动态内容 */}
            </View>
        </View>
    );
}

// 保留原有样式定义，新增计划名称样式
const styles = StyleSheet.create({
    container: { /* 你的容器样式 */ },
    columnContainer: { /* 你的列容器样式 */ },
    image: { /* 你的图片样式 */ },
    nameText: { /* 你的日期文本样式 */ },
    planText: {
        marginTop: 12,
        fontSize: 16,
        color: '#444'
    }
});

关键说明 #

• 参数传递逻辑：通过模板字符串拼接href，将选中的星期和用户输入的计划名称以查询参数的形式附加到URL中。
• 参数接收方式：useLocalSearchParams是Expo Router内置的钩子，专门用于获取URL中的查询参数，直接解构即可拿到对应值。
• 路由结构要求：确保viewday.js放在项目的pages目录（Expo Router v1）或app/pages目录（Expo Router v2+）下，与Link中的路由路径匹配。

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