Как реализовать детальный экран, который динамически отображает детали покемона, когда пользователь нажимает на картинку в режиме реагирования?

Question

Итак, я создал приложение для покемонов, которое отображало бы покемонов с их изображениями и деталями. На рабочем столе у ​​меня так, что первые 20 покемонов показываются в качестве превью. Затем, если пользователь хочет узнать больше о покемоне, он может нажать на покемона, и он выведет пользователя на экран «PokeDetails». Однако, когда я нажимаю на покемона, он приводит меня на страницу «PokeDetails», но страница пуста. За исключением текста, который я явно отображаю на экране «PokeDetails». У меня есть код для обоих экранов ниже. Любая помощь приветствуется. Спасибо

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



const PokeDetails =({name, imageUrl, detail, route})=> {

    return(
        <View style={GlobalStyles.container}>  
                <Text>This text is written expilictly</Text>
                <Text>{route.params.item}</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

Не знаю, понял ли я ваш вопрос. Вы уже передаете item реквизиты на свой PokeDetails компонент с рабочего стола, но в реквизитах, которые вы получаете, нет item. просто добавьте его, и я думаю, вы получите доступ к своим данным и сможете их отобразить:

const PokeDetails =({name, imageUrl, detail, item})=> {
    return(
        <View style={GlobalStyles.container}>
            <Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
            <Text style={GlobalStyles.pokeText}>{name}</Text>
            <Text>This text is explicitly written</Text>
            // add your stuff here...
            <Text>{item.something}</Text>

        </View>
    )
}

Кстати, поскольку у вас уже есть item проп, вы можете удалить name который уже исходит от предмета:)