Swiper使用React Native的FlatList

Question

我想让我的水平FlatList(启用分页)向左或向右滚动,内容始终位于屏幕中央,下一个和前一个内容仍然显示.

像这样的东西(用于横向动作)

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

Answer 1

我们公司有类似的需求,但现有的插件都没有完全满足我们的用例.我们最终创建了自己的并开源:react-native-snap-carousel.

该插件现在构建在FlatList(版本> = 3.0.0)之上,并提供预览(您所追求的效果),捕捉效果,视差图像,RTL支持等.

你可以看看展示,以了解它可以实现的目标.如果您决定尝试一下,请不要犹豫与我们分享您的反馈意见; 我们总是试图改进它.

编辑:版本中引入了两个新布局3.6.0(一个具有一叠卡片效果,另一个具有类似火种的效果).请享用!

Answer 2

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

相反，我使用此页面中的一些说明恢复到正常的 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
/>