Быстрая 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 ?
Спасибо, ваша помощь в этом очень ценится:)