反应本机启动路由器参数

Question

在这里beginner React-native程序员。我正在尝试使用Router.push（）学习如何将参数从一个路由器传递到另一个路由器。我已经尝试了文档所说的所有内容，以及Google搜索，甚至尝试了聊天GPT。但是我似乎什么都没有用。 我的文件结构是：

-app
  -_layout.jsx
  -index.jsx
  -user.jsx
-components
  -CustomButton.jsx

我_layout-jsx文件中唯一的东西是返回的堆栈。

_layout.jsx

import '../global.css' // Inserts the global css file for tailwind
import { Stack } from 'expo-router'

const App = () => {
  return (
    <Stack>
      <Stack.Screen name='index' />
      <Stack.Screen name='user' />
    </Stack>
  )
}

export default App

我的自定义按钮只是一个可触摸的，具有一些预定义的CSS样式custombutton.jsx

import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'

const CustomButton = ({ title, styles, onPress }) => {
    return (
        <TouchableOpacity
            className={`border p-2 mt-1 ${styles}`}
            onPress={onPress}
        >
            <View>
                <Text className='text-[20px] text-center'>{title}</Text>
            </View>
        </TouchableOpacity>
    )
}

export default CustomButton

Index.jsx

import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import { View, Text } from 'react-native'
import React from 'react'
import { useRouter } from 'expo-router'

import CustomButton from '../components/CustomButton'

const Home = () => {
    const router = useRouter()

    return (
        <SafeAreaProvider>
            <SafeAreaView className='flex-1 items-center justify-center p-4'>
                <Text className='text-5xl font-bold'>Home Page</Text>
                <CustomButton
                    title={'User'}
                    styles={'w-full bg-blue-300 rounded-[2vw]'}
                    onPress={() =>
                        router.push({
                            pathname: '/user',
                            query: {
                                name: 'Vincent',
                            },
                        })
                    }
                />
                <StatusBar style='dark' />
            </SafeAreaView>
        </SafeAreaProvider>
    )
}

export default Home

user.jsx

import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import { View, Text } from 'react-native'
import React from 'react'
import { useRouter } from 'expo-router'

import CustomButton from '../components/CustomButton'

const User = () => {
    const { query } = useRouter()
    console.log(query)

    return (
        <SafeAreaProvider>
            <SafeAreaView className='flex-1 items-center justify-center'>
                <Text className='text-5xl font-bold'>User Page</Text>
                <Text className='text-3xl font-bold'>
                    Welcome, {query.name}
                </Text>
                <StatusBar style='dark' />
            </SafeAreaView>
        </SafeAreaProvider>
    )
}

export default User

my console.log（QUERY）只是给了我

undefined

，我会在Query中得到一个React错误。名称说“无法读取dropert'name'''''''''''''''''''' 我尝试使用参数而不是查询，但这也导致了相同的未定义输出。

my package.json文件列出了我正在使用的软件包的版本。他们是：

{
  "name": "react-native-tutorial",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.28",
    "expo-constants": "~17.0.5",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-status-bar": "~2.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-native": "0.76.6",
    "react-native-reanimated": "^3.16.7",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "~4.4.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

在expo-router中，应使用基于路径的约定传递路由参数，而不是通过next.js

中的查询来传递。 try以更改index.jsx中的路由参数：onPress={() => router.push('/user?name=Vincent')}

Answer 1

aCcess参数：

import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import { Text } from 'react-native'
import React from 'react'
import { useSearchParams } from 'expo-router'

const User = () => {
    const params = useSearchParams()
    const name = params.name || 'Guest'

    return (
        <SafeAreaProvider>
            <SafeAreaView className='flex-1 items-center justify-center'>
                <Text className='text-5xl font-bold'>User Page</Text>
                <Text className='text-3xl font-bold'>
                    Welcome, {name}
                </Text>
                <StatusBar style='dark' />
            </SafeAreaView>
        </SafeAreaProvider>
    )
}

export default User

我希望useearchparams帮助