Question

我有一个提供此数据的远程api

{ "images" :
    [
    { "image_link" : "http://example.com/image1.png"},
    { "image_link" : "http://example.com/image2.png"},
    ]
}

我有一个有功能的课程。我没有在这里包含构造函数。

componentWillMount() {

    var url = 'https://naren.com/images.json';
    var that = this;
    fetch( url )
        .then((response) => response.json())
        .then((responseJson) => { that.setState({ images : responseJson.images }); })
        .catch((error) => { console.error(error); });
    }


render() {
    return ( <View>
        this.state.images.map(( image, key ) => {
           console.log(image); 
           return ( 
              <View key={key}>
                 <Image source={{ uri : image.image_link }} /> 
              </View>
           );
            });  
       </View>);
        }

我似乎无法将从api获取的图像循环到视图中。如果我使用没有远程源的静态数组，即fetch。这似乎工作得很好。但是当我使用fetch并从api获取数据时，这不起作用。我可以确认我正在获取数据，因为console.log(image)语句中的return控制了预期的数据。

Answer 1

我很快模拟了这一点，并且在图像数组上循环并渲染每个图像似乎没有问题。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class ImageLoop extends Component {

  constructor(props){
    super(props)
    this.state = {
      images : []
    }
  }

  componentWillMount() {

    var url = 'https://api.myjson.com/bins/2xu3k';
{/* 

or any API that can return the following JSON
{"images":[{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"}]}

*/}

var that = this;
        fetch( url )
            .then((response) => response.json())
            .then((responseJson) => {
              console.log('responseJson.images',responseJson.images);
              that.setState({ images : responseJson.images });
            })
            .catch((error) => { console.error(error); });
        }


render() {
  return (
    <View style={{height:100,width:100}}>
      {this.state.images.map((eachImage)=>{
        console.log('Each Image', eachImage);
        return (
          <Image key = {Math.random()} style={{height:100,width:100}} source ={{uri:eachImage.image_link}}/>
        );
      })}
    </View>
   );

    }
}

AppRegistry.registerComponent('ImageLoop', () => ImageLoop);

请在此处查看输出：https://rnplay.org/apps/bJcPhQ

Answer 2

尝试在width样式上设置height和Image。因为图像来自远程网址，所以本地反应本身不知道它的大小。

 render() {
    return ( <View>
        this.state.images.map(( image, key ) => {
           console.log(image); 
           return ( 
              <View key={key}>
                 <Image
                   source={{ uri : image.image_link }}
                   style={{ width: 120, height: 120 }}
                 /> 
              </View>
           );
            });  
       </View>);
        }

使用远程数据实现Native循环

2 个答案: