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

我有一个Species类,该物种渲染一个物种列表,这些物种是它们自己的SpeciesListItem组件,可以通过传递属性进行渲染的道具,但是单击列表项时,需要使用props转到population进入SpeciesDetail页面。 >,但是我该怎么做呢?

这是我的工作:

种类

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页面中?

谢谢,非常感谢您的帮助:)

最佳答案

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

您需要先将SpeciesListItem渲染方法包装到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事件应相对于您所按下的组件而不是父组件,因此应从“种类”中删除。

10-07 14:15