React-Native渲染多幅圖像

Question

我試圖從奇跡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

嘿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>
...

從webdevelopment中的背景來看，這看起來有點奇怪，但是有必要使滾動體驗順暢。

再見！ 安德斯