Question

Quick React-Native问题，如何将类中的道具通过 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>
        );
    }
}

SpeciesDetail

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

假定种类和 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}
/>

SpeciesDetail

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

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

Answer 2

当您导航到路线时，反应导航是一种将参数传递给路线的好方法。

在“种类”文件（或使用this.props.navigation.navigate的任何位置）中，您可以像这样将额外的参数传递给导航功能：

this.props.navigation.navigate('SpeciesDetail', { deerData: this.state.deerData })

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

this.props.navigation.getParam('deerData')

有关此主题的更多信息，请参见React Navigation docs。

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

种类

SpeciesListItem

SpeciesDetail

2 个答案:

SpeciesListItem

种类

SpeciesDetail