如何在反应原生轮播横幅中修复“活动页面指示器样式的错误索引”

Question

我使用从npm：react-native-banner-carousel下载的库https://www.npmjs.com/package/react-native-banner-carousel

不幸的是我的初始运行有问题：例如：错误的活动页面指示符：索引0处的图像，指标应该是索引0，不幸的是索引3处的指示符，这是我的代码：

  <View style={ {flex: 1,paddingTop: 20 }}>
                        <Carousel autoplay={true} autoplayTimeout={1000} loop={true} index={0} pageSize={BannerWidth} activePageIndicatorStyle={{backgroundColor: '#fff' , direction: 'rtl'}} pageIndicatorContainerStyle={{direction: 'rtl' }} >
                        {this.state.carouselData.map((ad_info, index) => this.renderPage(ad_info, index))}
                          </Carousel>
                                       </View>

渲染页面功能是：

renderPage(ad_info, index) {
  console.log("Ghadeer index", index , "::" , ad_info.ad_Title)
  var base64Icon = 'data:image/png;base64,'+ ad_info.ad_Banner;
      return (
          <TouchableOpacity transparent style={{width:BannerWidth,height:130, zIndex: 2}} transparent
                  onPress={() => this.openWebView(ad_info)}>
                  <Image
                  style={{width:BannerWidth , height: 130 , justifyContent: 'center', alignItems: 'center'}}
                       source={{uri: base64Icon}}
                  />
              </TouchableOpacity>
      );
  }

预期行为：

第一次加载时的当前行为：

Answer 1

问题是从服务器下载图像。我修复了它：从服务器完成下载后初始化轮播，下面是我的代码：

{this.state.finishDownloadAdsImageFromServer ? (<View style={styles.carouselContainer}>
                        <Carousel
                                    autoplay
                                    autoplayTimeout={1000}
                                    loop
                                    index={0}
                                    pageSize={BannerWidth}
                                    activePageIndicatorStyle={{backgroundColor: '#fff' }}
                                >
                        {this.state.carouselData.map((ad_info, index) => this.renderPage(ad_info, index))}
                          </Carousel>
                                       </View>) :  <View/>}

谢谢，