无法从navigation.navigate传递参数

Question

我无法使用以下代码将

itemId

参数传递给 RestaurantInfoScreen：

onPress={() => {
  navigation.navigate('RestaurantInfoScreen', { itemId: 86});
}}

并使用以下代码获取

RestaurantInfoScreen

中的参数：

const { itemId } = route.params;

但是像这样定义

initialParams

是有效的：

<RestaurantStack.Screen
   name = "RestauranInfoScreen"
   component={ResturantInfoScreen}
   initialParams={{ itemId: 46 }}
/>

我尝试了很多可能的方法，但无法从

navigation.navigate

函数传递参数。

这些是我尝试过的一些方法：

navigation.navigate('RestaurantInfoScreen', { itemId: 86});
navigation.navigate('RestaurantInfoScreen', { params: { itemId: 86 },});

如何正确传递参数。

非常感谢

Answer 1

Home.js

import { Button, StyleSheet, Text, TextInput, 
    View } from 'react-native';
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
  
const HomeScreen = () => {
  const [message, setMessage] = useState('');
  const navigation = useNavigation();
  const goToMessageScreen = () => {
    navigation.navigate('Message', {
      message,
    });
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>GeeksforGeeks</Text>
      <TextInput
        placeholder="Enter your message here"
        value={message}
        onChangeText={(text) => setMessage(text)}
        style={styles.input}
      />
      <Button title="Submit" 
        onPress={goToMessageScreen} color="green" />
    </View>
  );
};
  
export default HomeScreen;

详细信息.js

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
import { useRoute } from '@react-navigation/native';
  
const Detalis = () => {
  const route = useRoute();
  
  return (
    <View style={styles.container}>
      <Text>{route.params.message}</Text>
    </View>
  );
};
  
export default Detalis;

希望这能帮助您找到错误

Answer 2

您必须使用

useRoute()

和

useNavigation()

来获取这些参数。他们真的应该更新文档！查看 user19534405 的答案作为示例。