在 React Native 上显示来自数组的图像和文本
2021-04-07
1458
我是 React Native 的新手。我想显示数组中的图像和文本。 当我尝试从我的应用中提取图像时,它不起作用,图像未显示。
const DATA = [
{
title: "Animaux",
data: ["Poissons","Crevettes","Escargots"],
image: [require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png')]
}
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const ImageType = ({ image }) => (
<View style={styles.image}>
<Image source={image}/>
</View>
);
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item, image }) =>
<View >
<ImageType source={image}/>
<Item title={item} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
图像未显示。 你能告诉我我错在哪里吗? 谢谢。
编辑:
我像这样修改了我的数组:
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];
我尝试使用渲染提取数据:
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) =>
<View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'white'}}>
<ImageType image={item.image}/>
<Item title={item.data} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text style={styles.header}>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
我想使用标题参数显示部分标题,使用图像源显示图像,使用数组的数据参数显示文本。
我遇到此错误
ERROR TypeError: undefined is not an object (evaluating 'items.length')
``
3个回答
在您的语句中
renderItem={({ item, image }) =>
第二个参数应该是 index,
应该使用“ index ”而不是“ image ”
renderItem={({ item, index }) =>
为了从数组中获取参数“image”,您需要更改代码,如下所示:
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
Jitender Dev
2021-04-08
您的数据对象应该是通过它进行映射的对象数组,例如
var Data = [{title:"Poissons",image:require('../assets/icon_aquarium_style.png')},{title:"Crevettes",image:require('../assets/icon_aquarium_style.png')},{...},{...}]
然后在渲染项中
{({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}
lonecruisader
2021-04-08
尝试更正 renderItem。
renderItem={({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}
和 keyExtractor。
keyExtractor={(item, index) => item.title + index}
此 keyExtractor 将仅获取标题和索引,而不是完整对象。
和数据格式。
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];
prakhar tomar
2021-04-08