React Native ScrollView with pagination +显示下一页的一部分

Question

我正在尝试创建一个界面,其中卡片一次一个地呈现给用户.用户可以以分页的方式向​​左和向右滚动.我还想查看当前卡片左侧和右侧的少量卡片,作为暗示还有更多内容可供查看.一个非常粗略的例子是:

目前的代码是:

<ScrollView
   style={{width: Dimensions.get('window').width, height: 300}}
   horizontal={true}
   pagingEnabled={true}
   showsHorizontalScrollIndicator={false}
   alwaysBounceHorizontal={false}
   automaticallyAdjustContentInsets={false}>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
 </ScrollView>

Answer 1

我认为我对这个问题的回答可能会对你有所帮助.

总而言之,您绝对可以使用ScrollView或甚至更好地创建这种布局FlatList.但是,有两个棘手的部分:

• 捕捉效果,你可以使用道具snapToInterval和snapToAlignment.不幸的是,这些只是iOS版本.

• 非活动幻灯片的动画,需要大量自定义逻辑.

我和同事创建了一个满足这种特殊需求的插件.我们最终开源了,所以你可以试试:react-native-snap-carousel.

该插件现在构建在FlatList(版本> = 3.0.0)之上,这非常适合处理大量项目.它提供预览(您所追求的效果),iOS和Android的捕捉效果,视差图像,RTL支持等.

你可以看看展示,以了解它可以实现的目标.不要犹豫与插件分享您的经验,因为我们总是试图改进它.

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