React native 使用React Native'；s平面列表

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

类似这样的内容（用于水平动作）

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

---

使用图书馆可能会更好。我使用了

react native carousel

，在相同的用例中取得了良好的成功。github。您的代码如下所示：

import Carousel from 'react-native-carousel'

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

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

从“react native Carousel”导入转盘
getListItems（）{
返回[…，…]
}
render（）{
返回(
{this.getListItems（）}
)
}

我们公司也有类似的需求，但现有的插件没有一个完全满足我们的用例。我们最终创建了自己的开源it:

该插件现在构建在

FlatList

（版本>=3.0.0）之上，提供预览（您追求的效果）、抓拍效果、视差图像、RTL支持等功能

您可以查看一下，以了解使用它可以实现什么。如果您决定尝试一下，请毫不犹豫地与我们分享您的反馈；我们一直在努力改进它

---

编辑：已在版本

3.6.0

中引入（一个具有一叠卡片效果，另一个具有类似火绒的效果）。享受吧

---

我使用了react native snap carousel，虽然动画和自定义设置都很好，但很难设置样式，因为它的行为与普通视图不同，并且在ScrollView中也无法正确渲染

取而代之的是，我恢复到一个普通的平面列表，其中包含来自

设置：

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

@bend我喜欢react native snap carousel，我已经用了一段时间了！我有一个问题我无法解决，如果你有任何意见，我正在工作！当屏幕呈现我正在使用的snap carousel打开时，只有第一张卡呈现，而carousel的其余部分不呈现。这对我来说确实是个问题，因为用户不知道有旋转木马。你有什么建议吗？如果有帮助的话，我可以做一个单独的stackoverflow帖子@bzlight请打开一个问题，并确保遵循贡献指南。这是获得有用答案的最佳方式。请调整

decelerationRate=“fast”

，您可以删除

snapToAlignment

，因为默认情况下它设置为

start

（iOS）