Реагировать Родные петли с удаленными данными

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. Это, кажется, работает отлично. Но когда я использую выборку и получаю данные из api, это не работает. Я могу подтвердить, что получаю данные, потому что console.log(image) внутри операторов return утешает ожидаемые данные.

Answer 1

Попробуйте установить width и height на Image стиль. Поскольку изображения поступают из удаленного URL-адреса, реакция-native не знает, какой размер он будет.

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

Answer 2

Я быстро смоделированные это, и это, кажется, не есть проблема для цикла по массиву изображений и визуализации каждого изображения.

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