如何使用 flatlist 集成 react-native-swiper答案

【问题标题】：How to Integrate react-native-swiper using flatlist如何使用 flatlist 集成 react-native-swiper
【发布时间】：2019-01-22 13:25:38
【问题描述】：

我试图集成 react-native-swiper，它会在其中加载视频。我正在寻找一种将其与平面列表集成的方法。但是数据没有正确加载，有没有其他方法可以使用平面列表加载数据（使用 array.map()）

export default class HomeTab extends Component {
    render() {
     return (
       <FlatList
          data={Data}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) =>

            <Swiper style={styles.wrapper} 
                showsButtons={false}
                horizontal={true}
                loop={false}
                index={item.id}
                activeDot={
                  <View></View>
                }
                dot={
                  <View></View>
                }
                >
                  <View style={styles.slide1}>
                            <Video 
                                source={{uri: item.media}}   // Can be a URL or a local file.
                                ref={(ref) => {
                                  this.player = ref
                                }}        
                                resizeMode={'contain'}
                                style={styles.backgroundVideo} 
                        />

                      </View>
            </Swiper>

            }
          />
    )
  }
}

使用 npm 包：react-native-swiper https://www.npmjs.com/package/react-native-swiper

【问题讨论】：

您遇到什么错误？您似乎正在为每个 item 创建一个刷卡器，而不是刷卡器作为包装器。

标签： javascript react-native react-native-android react-native-flatlist react-native-swiper

【解决方案1】：

尝试使用这个库，因为 react-native-swiper-flatlist 它里面有 flatlist 下面的例子：

  <SwiperFlatList
        autoplay
        autoplayDelay={3}
        index={3}
        autoplayLoop
        data={items}
        renderItem={({item}) => // Standard Image
                            <View style={[styles.child, { backgroundColor: '#000' }]}>
                                <Image
                                    source={{uri:item.key}}
                                    style={styles.checkoutSliderImage}
                                />
                                <Text>{item.key}</Text>
                            </View>
                        }
        showPagination
      />

【讨论】：