从 API 获取时 React Native Snap 轮播不显示图像答案

【问题标题】：React Native Snap carousel not displaying images while fetching from API从 API 获取时 React Native Snap 轮播不显示图像
【发布时间】：2021-10-19 14:15:31
【问题描述】：

我正在尝试从包含图像源的 Wordpress API 获取帖子，然后在 Snap Carousel 中显示它们，但是在显示文本时图像不显示并且图像变得未定义。

这里是代码，我现在删除的 URL。

一切似乎都运行良好，只有图像没有加载。

import React, { Component } from 'react';
import { Text, View, Button, Image, flex } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import Carousel from 'react-native-snap-carousel';

class HomeSlider extends Component{

    constructor(props){
        super(props);
        this.state = {

          activeIndex:0,
          posts: {},
          loading: true,

      }
    }

    componentDidMount(){

        fetch("https://#/wp-json/wp/v2/posts?per_page=4")
        .then((response) => response.json())
        .then((data => {
         
          this.setState({
            posts: data,
            loading: false,
          })
        }
        ))

  
    }

    

    renderItem({item,index}){
        return (
          <View style={{
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
            borderRadius: 20,
           
             height: 250,
             marginLeft: 16,
             backgroundColor: 'white',
              elevation: 20,
              marginBottom:20,
              marginTop: 20,
              shadowColor: 'white',
              shadowOffset: {
                  width: 0,
                  height: 10,
              },
              shadowOpacity: 0.58,
              shadowRadius: 16.00,
              display: flex, flexDirection: 'column'}}>
            
            <Image style={{height: 150, width: '100%' ,borderTopLeftRadius: 20,
             borderTopRightRadius: 20}} 
             source={{uri: item.illustration}} />

            <Text style={{fontSize: 14, padding: 12 ,marginTop: 20, fontFamily: 'poppins_semibold'}}>{item.title}</Text>
          </View>

        )
    }
    render(){



      if(this.state.loading){
        
        return(<View><Text>Loading</Text></View>)
      
      }else{

 


        const carouselItems = this.state.posts.map(function(x){
          return (
            {
              title: x.title.rendered,
              illustration: x.better_featured_image.source_url,
            }
          )
        })
        
        return(
          <View style={{ flex: 1, flexDirection:'row', marginTop: 20, backgroundColor: '#FBFEFB'}}>
          <Carousel
            
            loop={true}
            loopClonesPerSide={2}
            autoplay={true}
            autoplayDelay={200}
            autoplayInterval={15000}
            layout={"default"}
            ref={ref => this.carousel = ref}
            data={carouselItems}
            sliderWidth={100}
            itemWidth={350}
            renderItem={this.renderItem}
            onSnapToItem = { index => this.setState({activeIndex:index}) } />
           </View>
      )
      }




    }

}

export default HomeSlider;

【问题讨论】：

标签： reactjs react-native react-native-android native

【解决方案1】：

看起来很完美！

刚刚在下面的代码中检查了illustration 是否为您提供了正确的 URL。

const carouselItems = this.state.posts.map(function(x){
      return (
        {
          title: x.title.rendered,
          illustration: x.better_featured_image.source_url, // test here by placing dummy url. 
        }
      )
    })

【讨论】：