我有一个import React from "react";
const HomeCard = (props) => {
return (
<View style={styles.container}>
<Image source={props.image} style={styles.image} />
</View>
);
};
export default HomeCard;
const styles = StyleSheet.create({
//Some Style
});
功能组件，看起来像这样：
HomePage然后我将此组件导入到我的HomePage
在我的HomeCard中，我有一个数组
卡的静态数据。
然后，我映射此数组并将道具分配给HomeCard并将其呈现在屏幕上。
我还使import React from "react";
//More Imports
export default class Home extends React.Component {
//Some Code
render() {
const { navigation } = this.props;
return (
<ScrollView>
//Some Code
<View style={styles.barContainer}>
<ScrollViewWithCards navigation={this.props.navigation} />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
//Some Style
});
const cards = [
{
day: "3",
month: "Jan",
numberOfPeople: "4",
time: "17:00-18:00",
title: "Dance Class",
image: require("../../../assets/images/image1.jpeg"),
},
//More Cards...
];
const ScrollViewWithCards = (props) => {
return (
<ScrollView>
{cards.map((card, index) => (
<View key={index} style={styles.cardContainer}>
<TouchableOpacity
onPress={() =>
props.navigation.navigate("ThisLesson", {
image: card.image,
day: card.day,
month: card.month,
time: card.time,
title: card.title,
numberOfPeople: card.numberOfPeople,
})
}
>
<HomeCard
image={card.image}
day={card.day}
month={card.month}
time={card.time}
title={card.title}
numberOfPeople={card.numberOfPeople}
/>
</TouchableOpacity>
</View>
))}
</ScrollView>
);
};
可点击以进行导航，并说 打开 卡片并在另一个屏幕上显示其属性
这是主屏幕
import React from "react";
export default class ThisLesson extends React.Component {
render() {
console.log(this.props);
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.topImageContainer}>
<Image style={styles.image} source={this.props.image} />
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
//More Style
image: {
width: "100%",
height: 277,
},
});
当我单击卡片时移至屏幕时，所有道具都传完了，只是图像没有显示
console.log如果我"params": Object {
"day": "3",
"image": 21,
"month": "Jan",
"numberOfPeople": "4",
"time": "17:00-18:00",
"title": "Dance Class",
},
屏幕支撑着这就是我的结果：
source图像{{1}}变成一个数字，什么都不显示，知道发生了什么事吗？