React-Native 水平滚动视图分页：预览下一页/卡片

Posted 2023-02-16

【中文标题】React-Native 水平滚动视图分页：预览下一页/卡片

【英文标题】：React-Native Horizontal Scroll View Pagination: Preview Next Page/Card

【发布时间】：2017-08-29 23:45:56

【问题描述】：

我想要一个启用分页的水平 ScrollView，但有一个特殊要求：每个页面（或卡片）是容器宽度的 90%。剩下的 10% 应该是下一页的预览。

可以用 ScrollView 做到这一点吗？我可以以某种方式指定分页的宽度而不是采用容器的宽度吗？

（图片取自类似问题：React Native Card Carousel view?）

【参考方案1】：

我花了很多时间来解决这个问题，直到我弄清楚了，所以如果它对某人有帮助，这就是我的解决方案。

https://snack.expo.io/H1CnjIeDb

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

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

【参考方案2】：

您完全可以使用ScrollView 或更好的FlatList 来做到这一点。然而，真正棘手的部分是捕捉效果。你可以使用道具snapToInterval和snapToAlignment来实现它（见Vasil Enchev's answer）；不幸的是，这些仅适用于 ios。

我和一位同事创建了一个插件来满足这一特殊需求。我们最终将其开源，因此您可以尝试：react-native-snap-carousel。

该插件现在构建在 FlatList（版本 >= 3.0.0）之上，非常适合处理大量项目。它提供预览（您想要的效果）、捕捉效果（适用于 iOS 和 android）、视差图像、支持 RTL强>，等等。

您可以查看showcase 以了解使用它可以实现什么。请随时分享您对该插件的体验，因为我们一直在努力改进它。

---

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

【讨论】：

@AlfredAlfizoMosima 当然 ;-) Here is 一个简单的例子。

试图通过 recyclerlistview 实现类似的目标。FlatList 对我来说问题太多了。

你们真是太棒了。感谢这个伟大的组件。我被 flatlist 困住，试图获取一些动画相关内容的当前活动项目索引。我尝试了一整天，但对于大型数据集却失败了。 Snap Carousal 给出了完美的结果。再次感谢。

【参考方案3】：

您可以将水平道具传递给您的滚动视图：

https://facebook.github.io/react-native/docs/scrollview.html#horizontal

然后你可以在里面创建一个视图来指定你的宽度要求。

<ScrollView 
  ref=(snapScroll) =>  this.snapScroll = snapScroll; 
  horizontal=true 
  decelerationRate=0
  onResponderRelease=()=>

   var interval = 300; // WIDTH OF 1 CHILD COMPONENT 

   var snapTo = (this.scrollingRight)? Math.ceil(this.lastx / interval) : 
    Math.floor(this.lastx / interval);
   var scrollTo = snapTo * interval;
   this.snapScroll.scrollTo(0,scrollTo);
  
  scrollEventThrottle=32
  onScroll=(event)=>
    var nextx = event.nativeEvent.contentOffset.x;
    this.scrollingRight = (nextx > this.lastx);
    this.lastx = nextx;
  
  showsHorizontalScrollIndicator=false 
  style=styles.listViewHorizontal
  >

  /* scroll-children here */

</ScrollView>

【讨论】：

我在 ScrollView 中有 horizontal=true pagingEnabled=true 作为道具。但是“滚动视图在滚动时在滚动视图大小的倍数处停止”facebook.github.io/react-native/docs/…

另请参阅此问题以获取帮助github.com/facebook/react-native/issues/1362

【参考方案4】：

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

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

【参考方案5】：

下面是简单的底部滚动视图分页示例：

<ScrollView
......
onMomentumScrollEnd=event => 
   if (isScrollviewCloseToBottom(event.nativeEvent)) 
      this.loadMoreData();
   

</ScrollView>

.....
....

function isScrollviewCloseToBottom(
  layoutMeasurement,
  contentOffset,
  contentSize,
) 
  const paddingToBottom = 20;
  return (
    layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom
  );


......
....

与我们可以将其用于正确分页一样：

function isScrollviewCloseToRight(
  layoutMeasurement,
  contentOffset,
  contentSize,
) 
  const paddingToRight = 10;
  return (
    layoutMeasurement.width + contentOffset.x >=
    contentSize.width - paddingToRight
  );

希望它会有所帮助..!!

【参考方案6】：

您可以查看 ScrollView 的 contentOffset 和 scrollTo 属性。从逻辑上讲，您可以做的是每当页面更改时（主要是在移动到下一页时），您可以根据需要提供 10% 左右的额外偏移量，以便滚动视图中的下一项变为可见。

希望这会有所帮助，如果您需要任何额外的详细信息，请告诉我。