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

Question

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

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

（图像来自这个类似的问题：React Native Card Carousel view?）

Answer 1

您绝对可以使用ScrollView或更好的FlatList来实现这一目标。然而，真正棘手的部分是捕捉效果。您可以使用道具snapToInterval和snapToAlignment来实现它（请参阅Vasil Enchev's answer）;不幸的是，这些只是iOS版本。

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

该插件现在构建在FlatList（版本＆gt; = 3.0.0）之上，非常适合处理大量项目。它提供预览（您之后的效果），iOS和Android的对齐效果，视差图片， RTL支持，等等。

您可以查看showcase以了解可以通过它实现的目标。不要犹豫与插件分享您的经验，因为我们一直在努力改进它。

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

Answer 2

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

https://snack.expo.io/H1CnjIeDb

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

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

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

Answer 4

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

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

Answer 5

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

希望这有帮助，如果您需要任何额外的细节，请告诉我。

Answer 6

您可以使用内置的ScrollView组件来构建水平滚动。像

<View style = { style.`custom-style` }>
   <ScrollView horizontal = { true } showsHorizontalScrollIndicator = { false 
   }>
    `...YOUR-CHILDREN-COMPONENTS`
   </ScrollView>
</View>

如果您想为诸如flex box之类的样式添加样式，请使用justifyContent您的选择值contentContainerStyle={{ justifyContent:，当然可以从{{ 1}}像这样}}，如果您愿意。 ＃欢呼声

Answer 7

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

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

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