在使用React Expo开发移动应用时，如何实现按钮点击后动态导航到不同的页面，并且在新页面中展示上一个页面传递的数据，是一个常见但又需要深入理解的问题。今天我们将探讨如何在React Expo中实现这一功能。

问题背景

假设我们正在开发一个健身计划应用，用户可以在首页选择一周中的某一天，点击按钮后跳转到该天的详细计划页面。传统的方法是为每个星期的每一天创建一个单独的页面，这显然是不理想的，因为这会导致代码冗余和维护困难。

解决方案

我们将使用以下技术来优化这个过程：

1. Expo Router：用于页面导航。
2. useLocalSearchParams：获取传递的参数。
3. React的useContext钩子：用于在不同组件间共享状态（这里我们主要使用params传递）。

步骤一：创建一个通用的页面组件

首先，我们创建一个名为viewday的页面组件，这个组件将根据传递的参数动态显示内容：

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

export default function ViewDay() {
    const { day } = 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>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    // ... 样式定义
});

步骤二：在首页使用映射生成按钮

在首页，我们将使用一个映射函数来生成代表每个工作日的按钮：

import { View, Text, TouchableOpacity, Image, TextInput } from 'react-native';
import { useRouter } from 'expo-router';

export default function CreatePlanHome() {
    const [name, setName] = useState('');
    const router = useRouter();

    return (
        <View style={styles.container}>
            <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={setName}
            />
            {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => (
                <TouchableOpacity
                    key={day}
                    style={styles.buttons}
                    onPress={() => router.push({ pathname: '/viewday', params: { day } })}
                >
                    <Text>{day}</Text>
                </TouchableOpacity>
            ))}
        </View>
    );
}

结论

通过上述方法，我们不仅减少了代码的重复性，也使得应用更加灵活和易于维护。用户现在可以通过点击按钮，动态地导航到显示特定日期的页面，并且这个页面能够根据传递的参数显示相应的信息。这种方法不仅适用于日期选择，也可以广泛应用于其他需要动态内容的场景。

希望这篇博客能帮助你在React Expo中实现更高效的页面导航和数据传递。继续探索React和Expo的可能性，创造出更多用户友好且功能强大的应用吧！