如何在反应原生导航中使用 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;


// 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;

Answer 1

如果你使用 React Navigation v5.x，你可以使用 useRoute 钩子。

Documentation here

例子：

import * as React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

function MyText() {
  const route = useRoute();

  return <Text>{route.params.caption}</Text>;
}

Answer 2

改变

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

到

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

希望这会有所帮助！