如何在本机导航中使用route.params获取路线参数？

Question

我正在使用react native和react native导航。当我尝试访问route.params时，它说它是未定义的对象。我可以使用this.props.navigation.navigate方法导航到PokeDetails屏幕，但是我无法从route.params.etc .....中获取参数。请参阅下面的代码。谢谢！

//Home.js

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";



class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    }

    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <FlatList 
                    numColumns={1}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate("PokeDetails", {item} )}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name} item={item} />
                    </TouchableOpacity>
                    }/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}


export default Home;



// PokeDetails.js

import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";



const PokeDetails =({route})=> {
    return(
        <View style={GlobalStyles.container}>  
                <Text>{route.params.item}</Text>
                {/* <Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
                <Text style={GlobalStyles.pokeText}>{name}</Text> */}
        </View>
    )
}


export default PokeDetails;