javascript - 使用 React Native 为数组中的每个对象打印图像

Question

我对 React Native 还很陌生，并且陷入了一个试图利用 Instagram API 的个人项目中。我目前正在使用 forEach 尝试为数组中的每个对象返回一个图像，但似乎我无法显示该图像。当我在 mediaPrinter 函数中执行 console.log(images.images.thumbnail.url) 时，我确实看到所有 url 都被记录下来。

这是 API 调用:

export default function ApiCall() {
  return fetch(url)
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        return json.data
      })
      .catch((error) => {
        console.log(error)
      })
}

其余相关代码:

mediaPage() {
  return <ScrollView style={styles.scrollBody}>
      <Text style={styles.welcome}>
          Browse Through Our Moments
      </Text>
      <View style={styles.imageRow}>
        {this.mediaHandler()}
      </View>
    </ScrollView>
}

mediaHandler() {
  ApiCall()
    .then((data) => {
      this.mediaPrinter(data)
    })
    .catch((error) => {
      console.log(error)
    })
}

mediaPrinter(array) {
  array.forEach(function(images) {
    return <Image
      source={{uri: images.images.thumbnail.url}}
      style={{width: 138, height: 138}} />
  })
}

我还想知道是否有一种方法可以使用 React Native 当前提供的资源来响应式地调整图像大小。

Answer 1

这应该可以解决问题:

class renderImages extends Component {
  constructor () {
    super()
    this.state = {
      images: []
    }
  }
  
  componentDidMount () {
    this.mediaHandler()
  }
  
  mediaPage() {
  return <ScrollView style={styles.scrollBody}>
      <Text style={styles.welcome}>
          Browse Through Our Moments
      </Text>
      <View style={styles.imageRow}>
        {this.mediaPrinter(this.state.images)}
      </View>
    </ScrollView>
}

mediaHandler() {
  ApiCall()
    .then((data) => {
    this.setState({images: data})
      //this.mediaPrinter(data)
    })
    .catch((error) => {
      console.log(error)
    })
}

mediaPrinter(array) {
  return array.map(function(images, index) {
    // don't put your key as index, choose other unique values as your key.
    return <Image
      key={index}
      source={{uri: images.images.thumbnail.url}}
      style={{width: 138, height: 138}} />
  })
}

}

您在 <View style={styles.imageRow}></View> 中调用的函数应该返回 jsx 进行渲染。正如您所看到的，在您的方法中，您没有返回任何内容。

在上面的解决方案中，我设置了当 medialHandler 从 Instagram 获取数据时的状态，这会触发重新渲染，并且使用 Instagram 照片数据数组再次调用 mediaPrinter 函数，因此它会被渲染。