Как передать React реквизиты через List List в класс - PullRequest
Новая
       72

Как передать React реквизиты через List List в класс

0 голосов
/ 20 сентября 2018

Быстрая React-Native проблема, как передать реквизиты из класса через SpeciesListItem , в SpeciesDetail класс?

У меня есть класс Species , который отображает список видов, являющихся их собственными SpeciesListItem Передаваемым компонентам достаточно хорошо для рендеринга, но при нажатии на элемент списка необходимо перейти к SpeciesDetail страница с props для population, но как мне сделать этот последний бит?

Вот что у меня работает:

Виды 

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 ?

Спасибо, ваша помощь в этом очень ценится:)

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

React Navigation имеет отличный способ передавать параметры в маршруты при переходе к ним.

В вашем файле Species (или везде, где вы используете this.props.navigation.navigate), вы можете передавать дополнительные параметры в функцию навигации, напримерИтак:

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

Затем в файле SpeciesDetail вы можете получить доступ к параметрам навигации следующим образом (заменив ссылки на this.props.deerData):

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

Более подробную информацию по этому вопросу можно найти в документах React Navigation .

0 голосов
/ 20 сентября 2018

Предполагая, что Виды и SpeciesDetail зарегистрированы в стек навигации

Вам необходимо сначала обернуть ваш SpeciesListItem метод рендеринга вTouchable объект для доступа к событиям касания.

SpeciesListItem 

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

Species 

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

The *Событие 1022 * должно относиться к компоненту, который вы нажимаете, а не к родительскому элементу, поэтому удалите TouchableHighlight из Species .

...