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')

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

关心Anker

Answer 1

Hejfæ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中的背景来看，这看起来有点奇怪，但是有必要使滚动体验顺畅。

见！安德斯

Answer 2

感谢您的回答安德斯。现在我尝试按照你的建议去做，但现在它只渲染了1张图像，很多次......

以下是更新后的代码：

class Character extends Component {

  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>
    );
  }
}

关心Anker

React-Native渲染多个图像

2 个答案: