快速反应本机问题,如何将道具从类通过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
事件应相对于您所按下的组件而不是父组件,因此应从“种类”中删除。