I have been working on displaying multiple images from the Marvel API.
For instance, here is a sample:
"images": [
{
"path": "http://i.annihil.us/u/prod/marvel/i/mg/e/00/52264475c3499",
"extension": "jpg"
},
{
"path": "http://i.annihil.us/u/prod/marvel/i/mg/e/70/51fc0cb22a1ff",
"extension": "jpg"
},
{
"path": "http://i.annihil.us/u/prod/marvel/i/mg/f/70/51fc0c8f4dee4",
"extension": "jpg"
},
{
"path": "http://i.annihil.us/u/prod/marvel/i/mg/7/40/51f9695a3ee93",
"extension": "jpg"
} ...
And below are some snippets of the code:
class Character extends Component {
constructor(props) {
super(props);
}
render() {
let comic = this.props.character;
return (
<View style={styles.container}>
<Text>{comic.description}</Text>
<Text style={styles.castTitle}>Characters in this comic:</Text>
<View>
{comic.characters.items.map(items =>
<Text key={items.name} style={styles.castActor}>
• {items.name}
</Text>
)}
</View>
<View>
<View>
{comic.images.map(images =>
<ListView key={images.path}>
<Image source={{uri: images.path }} style={styles.Images} />
</ListView>
)}
</View>
</View>
</View>
);
}
I have experimented with various solutions, but when I enclose it in ListView, I encounter this error:
Undefined is not an object (evaluating 'dataSource.rowIdentities')
I am uncertain about the reason behind this issue. Is there a specific approach to rendering multiple images that I should know about?
Best regards, Anker