TouchableOpacity链接到另一个页面并传递数据React Native

Question

你好，我碰到一个问题。在主页中，我正在创建一个卡片列表，其中显示名称、金额和图像，这些卡片是由infcard .js中的另一个函数创建的。

现在我不确定如何传递数据(名称，金额)和链接转到另一页

主页:

import InfoCard from "../components/test";
const Home = ({ navigation }) => {
return (      
{data.map((item, index) => (
<InfoCard {...item} key={index} />
))}      
);
};
export default Home;

InfoCard js

export default InfoCard = ({ image, brand, amount }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate("Detail")}>
<View style={externalStyle.home_company_list}>
<Image source={image} />
<View style={externalStyle.card}>
<Text style={externalStyle.home_company_text}>{brand}</Text>
<Text style={externalStyle.home_company_text}>{amount}</Text>
</View>
</View>
</TouchableOpacity>
);
};

详细信息页面

一旦从infcard .js创建的主页点击TouchableOpacity，将把数据(品牌，金额)传递给Detail页面并显示

Answer 1

可以作为参数传递:

export default InfoCard = ({ image, brand, amount }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate("Detail", {brand: brand,
amount: amount,})}>
<View style={externalStyle.home_company_list}>
<Image source={image} />
<View style={externalStyle.card}>
<Text style={externalStyle.home_company_text}>{brand}</Text>
<Text style={externalStyle.home_company_text}>{amount}</Text>
</View>
</View>
</TouchableOpacity>
);
};

，详细如下:

this.props.navigation.state.params.brand,this.props.navigation.state.params.amount

Answer 2

您可以简单地在"Detail"后面传递参数。路线的名字。看看这里:https://reactnavigation.org/docs/params/