使用function多次生成样例组件

Question

我是新的反应原生，并试图使用一个函数来创建相同的组件多次在for循环(如果可能的话)。下面的代码是一个单一的组件，我想创建多个组件，并在函数中为组件提供不同的数据。我该怎么做呢?

const Home = ({ navigation }) => {
<View
// onPress={() => navigation.navigate("Detail")}
style={externalStyle.image}
>
<Image
style={{
flex: 1,
width: null,
height: null,
resizeMode: "contain",
}}
source={require("../images/apple-logo.png")}
/>
<View style={externalStyle.card}>
<Text
style={{
fontWeight: "bold",
}}
>
APPLE
</Text>
<Text
style={{
fontWeight: "bold",
color: "#00a46c",
paddingLeft: 30,
paddingBottom: 30,
}}
>
$127.83{" "}
</Text>
</View>
</View>
);
};
export default Home;

Answer 1

试试这样

// Assuming your data shape
const data = [
{
image: 'apple-logo.png',
brand: "Apple",
amount: '$127.83'
},
{
image: 'googl-logo.png',
brand: "google",
amount: '$117.8'
},
]
// From your parent component 
render() {
return (
data.map((item, index) => {
return <InfoCard data={item} key={index}/>
})
)
}
// In your child component
const InfoCard = ({data}) =>{
const {image, brand, amount } = data;
return (
<View style={externalStyle.image}>
<Image source={require(`../images/${image}`)}/>
<View style={externalStyle.card}>
<Text>{brand}</Text>
<Text>{amount}</Text>
</View>
</View>
);
}