如何使react-native-banner-carousel从API加载图像（异步）

Question

我正在使用https://github.com/f111fei/react-native-banner-carousel/

它使用硬编码图像路径进行罚款。

但是如果我的images数组为空，则会发生此错误。它会在此图像中显示错误

我猜它是由空数组引起的（如果我错了，请纠正我）。 state.carousels在渲染时尚未加载到状态。 如何使其异步，以便它可以动态加载图像。

所以这是我的代码。

Dashboard.js

componentWillMount(){
    this.props.carouselFetch();
}
renderPage(image, index) {
    return (
        <View key={index}>
            <ImageFluid
                source={{ uri: image }}
                originalWidth={ 2500 }
                originalHeight= { 1000 }
            />
        </View>
    );
}
render(){
    const images = this.props.carousels;
    return(
        ......
        <Carousel
            autoplay
            autoplayTimeout={5000}
            loop
            index={0}
            showsPageIndicator={ false }
            pageSize={BannerWidth}
        >
        { images.map((image, index) => this.renderPage(image, index))}
        </Carousel>
        ......
    );
}
const mapStateToProps = (state) => {
    const carousels = state.carousel;
    return { carousels };
};

CarouselActions.js

export const carouselFetch = () => {
    return (dispatch) => {
        fetch('API json')
        .then((response) => response.json())
        .then((response) => {
            if (response.Status === 'Fail') {
                return Promise.reject(response)
            }
            return response
         })
         .then(carousels => {
              carouselFetchSuccess(dispatch, carousels);
         })
         .catch(() => console.log("Error"));
     };
};

const carouselFetchSuccess = (dispatch, carousels) => {
    dispatch({
        type: CAROUSEL_FETCH_SUCCESS,
        payload: _.map(carousels.data, i => i.image_path)
    });
};

我的Sample API json

包所需的样本数组方法

Answer 1

render(){
    const images = this.props.carousels;
    if (!images || images.length === 0) {
        return null;
    }

    return(
        ......
        <Carousel
            autoplay
            autoplayTimeout={5000}
            loop
            index={0}
            showsPageIndicator={ false }
            pageSize={BannerWidth}
        >
        { images.map((image, index) => this.renderPage(image, index))}
        </Carousel>
        ......
    );
}

当图像列表长度为0时，不要渲染轮播。

Answer 2

首次使用：

 const images = (  this.props.carousels || [] ).map( (image) => ( {
      value: carousels .name,
      label: carousels .id,
      order: carousels .data.
  } );

你有一个简单的对象数组而不是嵌套数组，你的响应是一个简单的res.data而不是res.carousel.data，如果你使用console.log（res），你会看到你的数组，检查一下。