如何在本机轮播横幅中修复“活动页面指示器样式的不正确索引”

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

问题在于从server下载图像。 我通过以下方式修复它：从服务器下载完成后初始化轮播，下面是我的代码：

{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/>}

谢谢