React-Native Horizo​​ntal Scroll View Pagination:预览下一页/卡片

Question

我想要一个水平的ScrollView,启用了一个特殊要求的分页:每个页面(或卡)是容器宽度的90%.剩下的10%应该是下一页的预览.

可以使用ScrollView执行此操作吗？我能以某种方式指定分页的宽度而不是取容器的宽度吗？

(图像来自这个类似的问题:React Native Card Carousel视图？)

Answer 1

我花了很多时间与之斗争,直到我弄明白,所以这是我的解决方案,如果它可以帮助某人.

https://snack.expo.io/H1CnjIeDb

问题是所有这些都是必需的,应该关闭分页

horizontal={true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}

Answer 2

你绝对可以用,ScrollView或者甚至更好FlatList.然而,真正棘手的部分是捕捉效果.您可以使用道具snapToInterval,并snapToAlignment实现它(见瓦西Enchev的答案); 不幸的是,这些只是iOS版本.

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

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

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

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

Answer 3

在 ScrollView 中使用disableIntervalMomentum={ true }。这将只允许用户一次水平滚动一页。查看官方文档 https://reactnative.dev/docs/scrollview#disableintervalmomentum

 <ScrollView 
  horizontal
  disableIntervalMomentum={ true } 
  snapToInterval={ width }
 >
  <Child 1 />
  <Child 2 />
</ScrollView>