Попытка доступа к route.params в реагирующем родном стековом навигаторе v5

Question

Я пытаюсь получить доступ к информации props.route.params.data из реквизита маршрута навигационной реакции, однако, когда я пытаюсь вывести ее на экран, она просто говорит: TypeError: undefined не является объектом (оценка props.routes.params) , Я знаю, что правильно выбрал путь к этому data объекту, потому что я console.log его на консоли, и он выводит эти данные. Однако, когда я хочу поставить его на пользовательский интерфейс, это дает мне эту ошибку. Был поиск в Интернете, но ни у кого нет такой проблемы, возможно, потому что способ получить параметры с помощью навигатора стека реагирования v5 - через route.params, а v5 вышел пару месяцев назад go. Поэтому я опубликую свой код ниже вместе с экраном 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, то есть вы можете сделать что-то вроде этого:

сменить Home . js вот так:

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
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>
                <View>{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", imageUrl:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
                        <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;

Здесь я просто передаю imageUrl также для справочных целей.

измените ваши pokedetails. js примерно так:

import React from "react";
import { View, Text , Image, Button} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '@react-navigation/native';



const PokeDetails =(props)=> {
console.log("props is",props);
if(props.navigation == undefined)
{
    return(
        <View>  
        <Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
        <Text>{props.name}</Text>
</View>
    )
}
else{
    return(
        <View>  
                <Image source={{uri: props.route.params.imageUrl}} style={{height: 50, width: 50}}/>
                <Text>{props.route.params.data}</Text>
        </View>
    )
}
}

export default PokeDetails;

Здесь я просто добавляю условие if, чтобы проверить, загружен ли экран, перемещается с другого экрана.

при загрузке главного экрана это будет примерно так:

При нажатии на лампочку или вы перейдете к экрану pokedetails, где здесь показаны детали, которые вы отправляете через навигацию:

Надеюсь, это поможет!