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

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（版本> = 3.0.0）之上，这对处理大量项目非常有用。它提供预览（你后的效果），抢购效应 iOS和Android，视差图像，RTL支持，等等。

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

---

编辑：two new layouts已在3.6.0版本被引入（其中一个带卡效果的堆叠，而另一个具有一个打火样作用）。请享用！

Answer 2

您可以通过水平道具滚动视图：

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 3

你可以看一下滚动型contentOffset和scrollTo财产。从逻辑上讲，只要页面发生变化（大多数情况下移动到下一页面），您可以根据需要提供10％左右的额外偏移量，以便滚动视图中的下一项变为可见。

希望这可以帮助，让我知道如果你需要任何额外的细节。

Answer 4

我花了很多时间与此战斗，直到我找到它，所以这是我的解决方案，如果它可以帮助某人。在所有的这些都需要

https://snack.expo.io/H1CnjIeDb

问题和分页应该被关闭

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