React-Native 渲染多个图像答案

【问题标题】：React-Native rendering multiple imagesReact-Native 渲染多个图像
【发布时间】：2016-04-02 16:04:09
【问题描述】：

我正在尝试从 marvels 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')

不知道为什么，有没有什么特殊的方法可以渲染多张图片？

问候安克

【问题讨论】：

标签： javascript android ios arrays react-native

【解决方案1】：

Hej fætter！ ;)

我认为您的问题是，您没有以正确的方式使用 ListView。查看 react-native 网站上的文档： 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>
...

如果来自 web 开发背景，这可能看起来有点奇怪，但有必要使滚动体验流畅。

再见！安德斯

【讨论】：