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

Question

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

它适用于硬编码图像路径。

但如果我的图像数组为空，就会发生此错误。它会显示错误，因为这个图像

我猜是空数组引起的（如有错误请指正）。 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)
    });
};

我的样本APIjson

包需要示例数组方法

Answer 1

首次使用：

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

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

Answer 2

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时不渲染轮播。