React-Native渲染多个图像

我正在尝试从奇迹api渲染多个图像。

这里是一个例子：

"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" } ... 

这里是一些代码：

 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}> &bull; {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> ); } 

我已经尝试了很多东西，如果我把它包装在ListView中我得到错误：

 Undefined is not an object (evaluating 'dataSource.rowIdentities') 

我不知道为什么，可能有一种渲染多个图像的特殊方法？

问候安克

Answer 1

Hejfætter！ ;）

我认为你的问题是，你没有正确的方式使用ListView。 查看反应原生网站上的文档： http ： //facebook.github.io/react-native/docs/listview.html#listview

你可能想要做一些事情：

 constructor(props) { const imgsrc = new ListView.DataSource({ rowHasChanged: (img1, img2) => img1.path !== img2.path }) this.state = { imageSource: imgsrc.cloneWithRows(props.comic.images) } } ... // In render function <View> <ListView dataSource={this.state.imageSource} renderRow={image => <Image source={{uri: image.path}} style={styles.Images} />} /> </View> ... 

从网页开发的背景来看，这可能看起来有点奇怪，但有必要使滚动体验顺畅。

再见！ 安德斯

Answer 2

谢谢你的回答安德斯。 现在我试图按照你的build议去做，但是现在它只渲染了一个图像，很多次…

这里是更新的代码：

类字符扩展组件{

  constructor(props) { super(props); const imgsrc = new ListView.DataSource({ rowHasChanged: (img1, img2) => img1.path !== img2.path }) this.state = { imageSource: imgsrc.cloneWithRows(this.props.character.images) } } render() { let comic = this.props.character; let imagePath = comic.thumbnail.path + '.' + comic.thumbnail.extension; return ( <ScrollView style={styles.scrollView}> <View style={styles.container}> <Image source={{uri: imagePath}} style={styles.Images} /> <View style={styles.facts}> <Text style={styles.title}> {comic.title} </Text> <Text style={styles.secondtitle}>Format: {comic.format}</Text> <Text style={styles.secondtitle}>Pages: {comic.pageCount}</Text> </View> </View> <View style={styles.description}> <Text style={styles.descriptionText}>{comic.description}</Text> <View style={styles.characters}> <Text style={styles.castTitle}>Characters in this comic:</Text> {comic.characters.items.map(items => <Text key={items.name} style={styles.characterName}> &bull; {items.name} </Text> )} </View> <View> <View> <ListView dataSource={this.state.imageSource} renderRow={image => <Image source={{uri: imagePath}} style={styles.Images} />} /> </View> </View> </View> </ScrollView> ); } } 

问候安克