使用 React Native 的 FlatList 的 Swiper

Question

我想让我的水平 FlatList（启用分页）向左或向右滚动，使内容始终位于屏幕中央，并且下一个和上一个内容仍然显示。

像这样（水平动作）

但不幸的是，当平面列表滚动时，滚动的长度与平面列表或其父级的宽度相同，我无法达到我想要的效果。

Answer 1

为此使用图书馆可能会更好。我已经使用 react-native-carousel 在相同的用例中取得了成功。 Github here。您的代码看起来像这样：

import Carousel from 'react-native-carousel'

getListItems() {
   return [ <View>...</View>, <View>...</View>]
}

render() {
   return (
      <Carousel>
         {this.getListItems()}
      </Carousel>
   )
}

Answer 2

我们公司有类似的需求，但是 none 的现有插件完全满足了我们的用例。我们最终创建了自己的资源并将其开源：react-native-snap-carousel.

该插件现在构建在 FlatList（版本 >= 3.0.0）之上，并提供预览（您想要的效果），捕捉效果、视差图像、RTL 支持 等。

您可以查看 showcase 以了解它可以实现什么。如果您决定尝试一下，请随时与我们分享您的反馈；我们一直在努力改进它。

编辑：two new layouts 已在版本 3.6.0 中引入（一个具有一堆纸牌效果，另一个具有类似火种的效果）。享受吧！

Answer 3

我使用了 react-native-snap-carousel，虽然动画和自定义非常好，但它真的很难设置样式，因为它的行为不像普通视图，而且它不能在 ScrollView 中正确呈现。

相反，我根据 this page

的一些说明恢复为普通的 FlatList

设置：

<FlatList
    data={this.data}
    renderItem={this._renderItem}
    keyExtractor={this._keyExtractor}
    horizontal={true} // row instead of column
    // Add the 4 properties below for snapping
    snapToAlignment={"start"} 
    snapToInterval={this.IMAGE_WIDTH + 10} // Adjust to your content width
    decelerationRate={"fast"}
    pagingEnabled
/>

使用 React Native 的 FlatList 的 Swiper

Swiper using React Native's FlatList

react-native

react-native-flatlist