【问题标题】:How do I render an image using map function?如何使用地图功能渲染图像?
【发布时间】:2020-10-12 18:44:51
【问题描述】:

我尝试从 URL 渲染图像,但没有成功。如果写URI ok,但是如果我写item.show.image.original.replace ('http:', 'https:') 来获取图片就没有成功。

问题是没有错误但没有渲染。

我已经成功的其他价值观。

import React, { Component } from "react";
import { Text, View, Image } from "react-native";

let termo = 'batman';
const API = 'http://api.tvmaze.com/search/shows?q='+termo;

export default class mapFunction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [], };
    }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => this.setState({ array: data}));
  }

  list = () => {
    return this.state.array.map(item => {
      return (
      <View style={{marginLeft: 10}}>
                   <Text>{item.score}</Text>
                   <Text>{item.show.name}</Text>
                   <Text>{item.show.type}</Text>
                    <Text>{item.show.language}</Text>
                   <Text>{item.show.summary} </Text>
                  <Image source={{uri:'https://static.tvmaze.com/uploads/images/original_untouched/6/16463.jpg'}}
                  style={{width:90, height:150}} />
       </View>
      );
    });
  };

  render() {
    return <View>{this.list()}
   
     </View>;
  }
}

【问题讨论】:

    标签: image react-native url rendering map-function


    【解决方案1】:

    只需将 render 函数更改如下:

    render() {
        return (
           <View>{this.list()}</View>
        );
    }
    

    【讨论】: