尝试在react native stack navigator v5中访问route.params

Question

我正在尝试从反应导航路线道具访问props.route.params.data信息，但是当我尝试在屏幕上输出它时，它只是说TypeError：undefined不是一个对象（正在评估props.routes.params）。我知道我正确地遵循了data对象的路径，因为我在控制台上进行了console.log记录并输出了该数据。但是，当我想将其放在用户界面上时，会出现该错误。一直在线搜索，但没人遇到相同的问题，可能是因为使用react stack navigator v5获取参数的方法是通过route.params，而v5出现在几个月前。因此，我将在以下代码以及console.log屏幕，错误消息以及我要从中选择的对象中发布代码。谢谢！

// App.js

import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import About from "./screens/About";
import Home from "./screens/Home";
import PokeDetails from "./screens/PokeDetails"
import { createStackNavigator } from '@react-navigation/stack';



const App =()=> {

  const Stack = createStackNavigator();

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


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



export default App;



// 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";
import { useRoute } from '@react-navigation/native';





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 
                    keyExtractor={(item, index) => item.name}
                    numColumns={1}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails', 
                    {data:"hello"})}>
                        <PokeDetails  imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
                    </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";
import { useRoute } from '@react-navigation/native';



const PokeDetails =(props)=> {

    console.log(props)
    console.log(props.route.params.data, "PROPSSSSSSSSSSS");

        return(
            <View style={GlobalStyles.container}>  
                    <Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
                    <Text>{props.route.params.data}</Text>
            </View>
        )


}



export default PokeDetails;

Answer 1

您会收到以下错误，因为您是主屏幕上的pokedetails，只有导航到pokedetails屏幕才能获得数据道具，您可以执行以下操作：