javascript - React-Native 渲染多个图像

Question

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

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

问候安克

Answer 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 开发背景的人来说，这可能看起来有点奇怪，但它是使滚动体验平滑的必要条件。

再见!安德斯