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

Question

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

我有一个Species类，该物种渲染一个物种列表，这些物种是它们自己的SpeciesListItem组件，可以通过传递道具进行渲染，但是，当单击列表项时，它需要使用for 转到SpeciesDetail页面，但是我该如何最后一点吗？propspopulation

这是我的工作：

种类

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

SpeciesListItem

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

为了清楚起见，我删除了许多代码，因为有许多SpeciesListItem组件，我需要知道选择了哪个组件来呈现相关数据，所以，请问如何将传递props给SpeciesDetail页面？

谢谢，非常感谢您的帮助：）

Answer 1

假设Species和SpeciesDetail已在导航堆栈中注册

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

SpeciesListItem

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');

该Touchable事件应该是相对于您所按下的组件而不是父组件，因此TouchableHighlight应从Species中删除。