Javascript 如何使用react native navigation中的route.params获取路由参数？

我正在将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;


// Root.js

import React from "react"
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import PokeDetails from "../screens/PokeDetails";
import { NavigationContainer } from '@react-navigation/native';



const Root =() => {
    const Stack = createStackNavigator();
    return(
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home}/>
            <Stack.Screen name="PokeDetails" component={PokeDetails}/>
        </Stack.Navigator>
    )
}


export default Root;



// App.js


import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from "@react-navigation/drawer";
import About from "./screens/About";
import Root from "./Route/Root";
import PokeDetails from "./screens/PokeDetails"



const App =()=> {

  const Drawer = createDrawerNavigator();

  return(
    <View style={styles.container}>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={Root}/>
          <Drawer.Screen name="About" component={About}/>
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})



export default App;

//Home.js
从“React”导入React，{useState}；
从“react native”导入{视图、文本、按钮、平面列表、ActivityIndicator、TouchableOpacity、图像}；
从“./styles/GlobalStyles”导入{GlobalStyles}；
从“/PokeDetails”导入PokeDetails；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：[]，
}
}
componentDidMount（）{
取回(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.然后（（res）=>res.json（））
。然后（（响应）=>{
这是我的国家({
孤岛加载：false，
数据来源：response.results，
})
日志（“响应”，响应）
log（“RESPONSE.RESSSULTS”，RESPONSE.results）
})
}
render（）{
const showIndicator=this.state.isLoading==true？：null；
返回(
{showIndicator}
this.props.navigation.navigate（“PokeDetails”，{item}）}>
}/>
this.props.navigation.navigate（“About”）}title=“转到About”/
)
}
}
导出默认主页；
//PokeDetails.js
从“React”导入React；
从“react native”导入{视图、文本、图像、按钮}；
从“./styles/GlobalStyles”导入{GlobalStyles}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
常量PokeDetails=（{route}）=>{
返回(
{route.params.item}
{/* 
{name}*/}
)
}
导出默认PokeDetails；
//Root.js
从“React”导入React
从“@react navigation/stack”导入{createStackNavigator}；
从“./屏幕/主页”导入主页；
从“./screens/PokeDetails”导入PokeDetails；
从'@react-navigation/native'导入{NavigationContainer}；
常量根=（）=>{
const Stack=createStackNavigator（）；
返回(
)
}
导出默认根目录；
//App.js
导入“反应本机手势处理程序”；
从“React”导入React；
从“react native”导入{View，StyleSheet}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/drawer”导入{createDrawerNavigator}；
从“/screens/About”导入关于；
从“/Route/Root”导入根目录；
从“/screens/PokeDetails”导入PokeDetails
常量应用=（）=>{
const Drawer=createDrawerNavigator（）；
返回(
)
}
const styles=StyleSheet.create({
容器：{
弹性：1
}
})
导出默认应用程序；

如果您使用的是React Navigation v5.x，则可以使用useRoute挂钩

例如：

import*as React from'React'；
从“react native”导入{Text}；
从'@react-navigation/native'导入{useRoute}；
函数MyText（）{
const route=useRoute（）；
返回{route.params.caption}；
}

更改

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>
    )
}

constpokedetails=（{route}）=>{
返回(
{route.params.item}
{/* 
{name}*/}
)
}

到

const PokeDetails=（路由）=>{
返回(
{route.route.params.item.name}
{/* 
{name}*/}
)
}

---

希望这有帮助

你能分享你的react导航版本吗？当然，这是react导航版本5。谢谢这两个屏幕是在同一个堆栈导航器中吗？大家好，Dushan，我已经做了编辑，并在上面添加了Root.js和App.js，以显示堆栈导航器和抽屉导航器的代码。基本上，Root.js保存堆栈导航容器。App.js持有嵌套堆栈导航器根组件的抽屉导航。再次感谢！谢谢你的回复！我已经这样做了。在我实现了这个之后，我使用console.log const route，params键在那里，但是由于某些原因，值没有定义。谢谢！我发现这就是答案

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