在轮播中获取动态图像以响应本机

Question

我正在使用 react-native-image-gallery。其中 url 的这些图像已经在 images 数组的状态中给出。但是我想动态加载我从 API 获取的这些图像，如代码所示。我能够将这些路径保存在状态中，但是要显示这些图像，它需要 https://xyz.in/ 的域名。我被困在上面如何显示那些动态获取的图像。

请帮忙。

代码：

  constructor(props) {
    super(props);
    this.state = {
      images: [
          { source: { uri: 'http://i.imgur.com/30s12Qj.jpg' } },
          { source: { uri: 'http://i.imgur.com/4A1Q49y.jpg' } },
          { source: { uri: 'http://i.imgur.com/JfVDTF9.jpg' } },
          { source: { uri: 'http://i.imgur.com/Vv4bmwR.jpg' } }
      ],
      fetched_images:[]
    };
  }


  async componentDidMount() {
      return fetch(`https://xyz.in/api/shop/username`,
    {
      method: "GET",
      headers: {
        'Authorization': `JWT ${DEMO_TOKEN}`
      }
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          fetched_images: responseJson.all_images,
        });
    })
  }



  render() {
    return (
      <View>
         <Gallery
            style={{ height:300, width:'100%', backgroundColor: '#696969'}}
            images={this.state.images}
            errorComponent={this.renderError}
            onPageSelected={this.onChangeImage}
            initialPage={0}
          />
      </View>
    );
  }

json数据：

"all_images": [
    {
        "image": "/media/All%20Product%20Images/20150415_093955_2.jpg"
    },
    {
        "image": "/media/All%20Product%20Images/amshoe.jpg"
    },
    {
        "image": "/media/All%20Product%20Images/ckramii.jpg"
    }
]

Answer 1

您可以通过制作格式化程序函数来格式化您的图像

const DomainName = 'https://xyz.in'

const formatImages = (images) => {
  return images.map(image => {
    return {source: {uri : `${DomainName}/${image}`}}
  })
}

.then((responseJson) => {
   const formattedImages = this.formatImages(responseJson.all_images)
   this.setState({
     fetched_images: formattedImages,
   });

 <Gallery
     ...// Other props
     images={this.state.fetched_images}
  />

在轮播中获取动态图像以响应本机

Fetching dynamic images in carousel in react native

reactjs

react-native

carousel

react-native-image