代码之家 › 专栏 › 技术社区 › Samik

如何在我的React Native应用程序中跨多个页面传输数据?

expo react-native javascript

1

Samik · 技术社区 · 2 年前

我正在使用JavaScript和React Expo创建一个应用程序,该应用程序需要一个功能,当我按下按钮时,它会根据按下的按钮将用户重定向到一个页面,并且该页面包含上一页的数据。

我正在使用Expo Router进行页面导航。

以下是我当前拥有所有按钮选项的页面的一些代码:

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)}
                        />
                <Link href="/pages/viewmonday" style = {styles.buttons}>Monday</Link>
                <Link href="/pages/viewtuesday" style = {styles.buttons}>Tuesday</Link>
                <Link href="/pages/viewwednesday" style = {styles.buttons}>Wednesday</Link>
                <Link href="/pages/viewthursday" style = {styles.buttons}>Thursday</Link>
                <Link href="/pages/viewfriday" style = {styles.buttons}>Friday</Link>

然而,我为一周中的每一天都有一个单独的页面,这并不理想——我只想更改它,这样它就只有一个页面可以根据选择的日期更改数据。

这是每一天的代码——唯一改变的是一天的名称,即在下面的代码中它所说的“星期一”。

export default function viewmonday() {
    return (
        <View style={styles.container}>
            <Image source={require('./assets/logo.png')} style={styles.image} />
            <View style={styles.columnContainer}>
                <Text style = {styles.nameText}>Monday</Text>

我非常感谢你的帮助——谢谢。

我试图在每个视图日页面中使用一个变量,但我不确定如何更改上一页选择的变量。

return(
        <View style={styles.container}>
            <Image source={require('./assets/logo.png')} style={styles.image} />
            <View style={styles.columnContainer}>
               <Text style={styles.nameText}>{displayDay}</Text>

1 回复 | 直到 2 年前

1

0

Nishant Wangneo 2 年前

我想说的最主要的一件事是你应该试着使用地图。映射允许您迭代某些值,其工作方式类似于其他语言中的循环。您可以将映射设置为遍历所有工作日的列表,并为每个工作日创建一个按钮/href。此外,使用router.push将当天的值作为参数的一部分发送到新页面。它应该是这样的:

{['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => (
                <TouchableOpacity
                    key={day}
                    style={styles.buttons}
                    onPress={() => router.push({ pathname: '/pages/viewday', params: { day } })}
                >
                    <Text style={styles.buttons}>{day}</Text>
                </TouchableOpacity>
            ))}

这应该可以解决你的两个主要问题,即每个工作日都没有单独的链接。(我使用了TouchableOpacity,但你可以使用任何其他你想要的东西)

将/viewmonday替换为/viewday,并使用方法useLocalSearchParams()从上一页获取参数

export default function viewday() {
    const selectedDay = useLocalSearchParams();
    const displayDay = selectedDay["day"];
   return(
    
               <Text style={styles.nameText}>{displayDay}</Text>

)