Javascript 当用户按react native中的图片时，如何实现动态显示pokemon细节的细节屏幕？

因此，我构建了一个口袋妖怪应用程序，可以显示口袋妖怪的图像和细节。在主屏幕上，我有它，所以前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;

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

我不知道我是否理解了你的问题。你已经从主屏幕向你的
PokeDetails
组件传递了一个
项目
道具，但是你收到的道具中没有
项目
。只要添加它，我想你将访问你的数据并能够显示它：

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

constpokedetails=（{name，imageUrl，detail，item}）=>{
返回(
{name}
这篇文章是明确写的
//在这里添加您的内容。。。
{item.something}
)
}

顺便说一句，既然你已经有了
项目
道具，你可以删除
名称
，它已经来自项目：）
嗨，谢谢你的回复！问题是我有两个不同的屏幕。第一张图片是主屏幕，我只想在主屏幕上显示10个口袋妖怪的预览。然后当用户按下单个口袋妖怪时，它把我带到口袋妖怪（第二张图片）屏幕上显示单个口袋妖怪的信息。但是，由于某种原因，信息没有显示在那里，即使它在我写所有信息的组件中。再次感谢！@kennyman335好的，也许您可以在导航到PokeDetails时尝试将项作为route参数传递。只需将项作为参数：
navigation.navigate（'Pokedetails'，{item}）；
然后在你的Pokedetails屏幕中，你可以在你的道具
const Pokedetails=（{name，imageUrl，detail，route}=>{…}
。你可以在
route.params.item
或
[item}中访问你的项目=route.params
取决于您喜欢的语法；）让我知道它是否有效我会编辑答案Hi Quentin，感谢您花时间回答。我已经完成了您所说的，但出现了一个错误：“undefined不是一个对象（评估route.params）”。我相信这与我有两个不同的导航器有关（Root.js中的堆栈导航器和App.js中嵌套堆栈导航器的抽屉导航器）如果您想查看，我已经为这些文件添加了代码。再次感谢！嗨@kennymann335，首先您应该更改其中一个“主页”的名称screen，这很令人不安哈哈，但我不认为这与你的问题有关。你能试着做
导航。导航（'PokeDetails'，{screen:'PokeDetails'，params:{items}）；
请？嘿，昆汀，谢谢你的建议：）.我已经实现了，但由于某些原因，route.params仍然没有定义。真的很奇怪