react-native-swiper 使用中遇到的问题

在网上搜索react-native-swiper，出来的都是官方的例子或者其变种。在开发过程中，我需要实现一个banner轮播，按道理讲，使用react-native-swiper是最合适的，所以，我就将其添加到项目中，然后开始集成。我的轮播图是从接口请求的数据，然后进行展示的， 我的代码类似下面这样：

var swiper = (this.state.bannerData.map((item, key) => {
            let imageURL = URLHelper.image + "?path=" + item.ban_Picture;
            return (
                <View key={item.ban_Picture} style={{
                    flex: 1,
                    justifyContent: 'center',
                    backgroundColor: '#97CAE5'
                }} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
                    <Image style={{width: '100%', height: '100%'}}
                           source={{uri: imageURL}}></Image>
                </View>
            )
        }));

<Swiper
                        onIndexChanged={(index) =>
                            this.bannerIndexChange(index)
                        }
                        autoplay={true}
                        horizontal={true}
                        loop={true}
                        renderPagination={(index, total, context) => {
                            return (
                                <View style={{
                                    position: 'absolute',
                                    bottom: 10,
                                    right: 10
                                }}>
                                    <Text style={{color: 'grey'}}>
                                        <Text style={{
                                            color: 'white',
                                            fontSize: 20
                                        }}>{index + 1}</Text>/{total}
                                    </Text>
                                </View>
                            );
                        }
                        }
                    >
                       {swiper}
                    </Swiper>

这样集成以后的问题就是，监听不到轮播图的切换(如果是显示圆点,圆点就一直停留在第一个),
如果我把代码改成下面这样，就OK了，一切都正常。

<Swiper
       onIndexChanged={(index) =>
                          this.bannerIndexChange(index)
                        }
                        autoplay={true}
                        horizontal={true}
                        loop={true}
                        renderPagination={(index, total, context) => {
                            return (
                                <View style={{
                                    position: 'absolute',
                                    bottom: 10,
                                    right: 10
                                }}>
                                    <Text style={{color: 'grey'}}>
                                        <Text style={{
                                            color: 'white',
                                            fontSize: 20
                                        }}>{index + 1}</Text>/{total}
                                    </Text>
                                </View>
                            );
                        }
                        }
                    >
                        <View key={this.state.bannerData[0].ban_Picture} style={{
                            flex: 1,
                            justifyContent: 'center',
                            backgroundColor: '#97CAE5'
                        }} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
                            <Image style={{width: '100%', height: '100%'}}
                                   source={{uri:URLHelper.image + "?path=" +
                                       this.state.bannerData[0].ban_Picture}}></Image>
                        </View>

                        <View key={this.state.bannerData[1].ban_Picture} style={{
                            flex: 1,
                            justifyContent: 'center',
                            backgroundColor: '#97CAE5'
                        }} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
                            <Image style={{width: '100%', height: '100%'}}
                                   source={{uri:URLHelper.image + "?path=" +
                                   this.state.bannerData[1].ban_Picture}}></Image>
                        </View>
                    </Swiper>

也就是说，轮播图中的多个元素分开写是没有问题的，但是如果使用循环（for或者其他遍历方式）就会有问题，我尝试了各种模仿官方例子的方式修改代码都无济于事。希望有遇到相同问题的同学可以一起讨论，如果您已经解决，麻烦指点一下，不胜感激。

已经解决：只需要在for循环的时候元素后面添加一个空行，是的，你没有看错就是一个或者多个空行。