React-Native 水平滚动视图分页：预览下一个 Page/Card

Question

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

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

（图片来自这个类似的问题：）

Answer 1

您可以将水平属性传递给滚动视图：

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>

Answer 2

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

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

Answer 3

我花了很多时间来解决这个问题，直到我弄明白，如果它能帮助到别人，这就是我的解决方案。

https://snack.expo.io/H1CnjIeDb

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

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

Answer 4

您完全可以使用 ScrollView 或更好的 FlatList 来做到这一点。然而，真正棘手的部分是捕捉效果。您可以使用道具 snapToInterval 和 snapToAlignment 来实现它（参见）；不幸的是，这些只是 iOS。

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

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

您可以查看 showcase 以了解它可以实现什么。不要犹豫，分享您使用该插件的经验，因为我们一直在努力改进它。

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

Answer 5

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

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

Answer 6

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

<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
  );
}

希望对您有所帮助..!!

React-Native 水平滚动视图分页：预览下一个 Page/Card

React-Native Horizontal Scroll View Pagination: Preview Next Page/Card

pagination

scrollview

horizontalscrollview

carousel

react-native