Использование URL-ссылки изображения, полученной из веб-API, для отображения изображения в представлении - PullRequest
Новая
       15

Использование URL-ссылки изображения, полученной из веб-API, для отображения изображения в представлении

0 голосов
/ 11 января 2019

После некоторых поисков в Интернете я нашел приличный код, на котором базируются мои требования. Я успешно получил данные из моего веб-API и отобразил содержимое на странице просмотра FlatList. Однако URL-адрес изображения, полученный из API, не обрабатывается, и я не уверен, почему.

Это мои результаты

image

/**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      FlatList,
      ActivityIndicator,
      Image
    } from 'react-native';
    //import data from './json/FetchJsonDataExample.json';

    export default class App extends Component<Props> {
      constructor(props) {
        super(props);

        this.state = {
          isLoading: true, // check if json data (online) is fetching
          dataSource: [], // store an object of json data
        };
      }

      componentDidMount() {
        return fetch("https://www.apakataorang.com/wp-json/wp/v2/posts?per_page=20")
              .then((response) => response.json())
              .then((responseJson) => {
                // set state value
                this.setState({
                  isLoading: false, // already loading
                  dataSource: responseJson
                });
              })
              .catch((error) => {
                ToastAndroid.show(error.toString(), ToastAndroid.SHORT);
              });
      }

      render() {
        // show waiting screen when json data is fetching
        if(this.state.isLoading) {
          return(
            <View style={{flex: 1, padding: 20}}>
              <ActivityIndicator/>
            </View>
          )
        }

        return(
          <View style={{flex: 1, paddingTop:30}}>
            <FlatList
              data={this.state.dataSource}
              renderItem={({item}) => {
                return (
                  <View>
                    <Text style={styles.info}>{item.title.rendered}</Text>
                    <Image
                    source={{uri: 'item.jetpack_featured_media_url'}}
                    style={{width:'100%', height: 200, resizeMode : 'stretch'}}
                    />
                    <Text style={styles.info}>{item.jetpack_featured_media_url}</Text>
                  </View>
                )
              }}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      info: {
        fontSize: 20,
      }
    });

В идеале хотелось бы, чтобы изображение отображалось на виде.

1 Ответ

0 голосов
/ 11 января 2019

удалить одинарные кавычки из исходной пропозиции компонента Image, как показано ниже: 

<Image
    source={{uri: item.jetpack_featured_media_url}}
    style={{width:'100%', height: 200, resizeMode : 'stretch'}}
/>

Если вы установите 'item.jetpack_featured_media_url' (с одинарной кавычкой) в URI, он будет рассматривать его как сам путь

...