Javascript 如何通过列表项将React道具传递给类

快速反应本机问题，我如何通过SpeciesListItem将道具从类传递到SpeciesDetail类

我有一个类物种，它可以呈现一个物种列表，这些物种是它们自己的物种列表项组件，它们通过道具来呈现，但是当单击列表项时，它需要转到物种详细信息页面，其中包含

种群的
道具
，但是最后一点我该怎么做呢

这就是我的工作：

种
import React，{Component}来自'React'；
从“react native”导入{ScrollView，StyleSheet，Switch，Text，TouchableHighlight，View}；
从“/SpeciesListItem”导入SpeciesListItem；
从“./deerDataJson”导入deerData；
导出默认类扩展组件{
构造函数（）{
超级（）；
此.state={
deerData:deerData，
}
}
render（）{
返回(
this.props.navigation.navigate（'SpeciesDetail'）}
style={styles.touchableHighlightButton}
underlayColor={null}>
);
}
}

物种列表项
import React，{Component}来自'React'；
从“react native”导入{图像、样式表、文本、视图}；
从“../../style/colors”导入颜色；
导出默认类SpeciesListItem扩展组件{
deerData=this.props.deerData；
render（）{
返回(
{/****鹿图像******/}
{/****列表项文本******/}
{this.deerData.deerNameLatin}
{this.deerData.deerName}
{this.deerData.ListItemDescription}
阅读更多
);
}
}

物种详情
import React，{Component}来自'React'；
从“react native”导入{ScrollView、样式表、文本}；
导出默认类SpeciesDetail扩展组件{
render（）{
log（'data:'，this.props.deerData）；
返回(
{this.props.deerData.}
);
}
}

为了清晰起见，我删除了一堆代码，因为有许多SpeciesListItem组件，我需要知道选择了哪一个组件来呈现相关数据，因此，请问，我如何将
道具
传递到SpeciesDetail页面

谢谢，非常感谢您的帮助：）
假设物种和物种详细信息已在导航堆栈中注册

您需要首先将
SpeciesListItem
render方法包装到
Touchable
对象中，以便访问触摸事件

物种列表项
Touchable
事件应该与您正在按下的组件相关，而不是与父组件相关，因此从Species中删除
Touchable highlight
，前提是Species和SpeciesDetail已在导航堆栈中注册

您需要首先将
SpeciesListItem
render方法包装到
Touchable
对象中，以便访问触摸事件

物种列表项
Touchable
事件应该与您正在按下的组件相关，而不是与父组件相关，因此从物种中删除
Touchable突出显示
当您导航到路线时，导航有一个很好的方法将参数传递给路线

在您的物种文件中（或使用
this.props.navigation.navigate
的任何位置），您可以向导航功能传递额外的参数，如下所示：

this.props.navigation.navigate（'SpeciesDetail'，{deerData:this.state.deerData}）

然后，在SpeciesDetail文件中，您可以像这样访问导航参数（替换对
this.props.deerData
的引用）：

this.props.navigation.getParam（'deerData'）

有关此主题的更多信息，请参阅。
当您导航到路线时，导航有一种将参数传递给路线的好方法

在您的物种文件中（或使用
this.props.navigation.navigate
的任何位置），您可以向导航功能传递额外的参数，如下所示：

this.props.navigation.navigate（'SpeciesDetail'，{deerData:this.state.deerData}）

然后，在SpeciesDetail文件中，您可以像这样访问导航参数（替换对
this.props.deerData
的引用）：

this.props.navigation.getParam（'deerData'）

关于这个主题的更多信息可以在中找到。
在我回答之前澄清一下，您试图通过
react导航传递道具，对吗？您好@Harrison，我不确定您所说的“通过”react导航是什么意思，但我正在使用它，是的。我需要从屏幕1（其中包含一个列表项组件）转到屏幕2。您正在使用
react导航
在页面之间导航，因为您没有使用
redux
这样的框架，所以最好使用
react导航
传递道具。给我一点时间，我会写下你的解决方案Kay nvm Pritish已经提交了一个很好的答案，但是如果你还没有看这一页，你应该：在我回答之前先澄清一下，你试图通过
react导航
传递道具，对吗？嗨@Harrison，我不确定你所说的“通过”react导航是什么意思，但是我在用它，是的。我需要从屏幕1（其中包含一个列表项组件）转到屏幕2。您正在使用
react navigation
在页面之间导航，因为您
import React, {Component} from 'react';
import {ScrollView, StyleSheet, Switch, Text, TouchableHighlight, View} from 'react-native';

import SpeciesListItem from './SpeciesListItem';

import deerData from './deerDataJson';

export default class Species extends Component {
    constructor() {
        super();

        this.state = {
            deerData: deerData,
        }
    }

    render() {
        return (
            <ScrollView style={styles.pageContainer}>

                <TouchableHighlight onPress={() => this.props.navigation.navigate('SpeciesDetail')}
                                    style={styles.touchableHighlightButton}
                                    underlayColor={null}>
                    <SpeciesListItem deerData={this.state.deerData.fallowDeer}/>
                </TouchableHighlight>

            </ScrollView>
        );
    }
}

import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';

import colors from "../../Styles/colors";

export default class SpeciesListItem extends Component {

    deerData = this.props.deerData;

    render() {
        return (
            <View style={styles.pageContainer}>

                {/***** Deer image *****/}
                <View style={styles.deerImageContainer}>
                    <Image style={styles.image}
                           source={this.deerData.deerImage}
                           resizeMode="center"
                    />
                </View>

                {/***** List item text *****/}
                <View style={styles.textContainer}>
                    <Text style={styles.deerNameLatin}>{this.deerData.deerNameLatin}</Text>
                    <Text style={styles.deerName}>{this.deerData.deerName}</Text>
                    <Text style={styles.deerDescription} numberOfLines={3}>{this.deerData.ListItemDescription}</Text>
                </View>

                <Text style={styles.readMoreButton}>Read more</Text>

            </View>
        );
    }
}

import React, {Component} from 'react';
import {ScrollView, StyleSheet, Text} from 'react-native';

export default class SpeciesDetail extends Component {
    render() {

        console.log('data: ', this.props.deerData);

        return (
            <ScrollView>

                <Text>{this.props.deerData.}</Text>

            </ScrollView>
        );
    }
}

render() {
  <TouchableOpacity onPress={this.props.onPress}>
    //... Other stuff
  </TouchableOpacity>
}

<SpeciesListItem onPress={() => this.props.navigation.navigate('SpeciesDetail', {deerData: this.state.deerData.fallowDeer})}
 deerData={this.state.deerData.fallowDeer}
/>

render() {
    /* Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('deerData', 'NO-ID');