反应原生ScrollView与分页+显示下一页的一部分

我试图创建一个接口，其中卡一次呈现给用户。用户可以以分页的方式向左和向右滚动。我还想在当前卡的左侧和右侧查看少量卡片，作为还有更多要看的提示。这方面的一个非常粗略的例子是：反应原生ScrollView与分页+显示下一页的一部分

当前的代码：

<ScrollView 
    style={{width: Dimensions.get('window').width, height: 300}} 
    horizontal={true} 
    pagingEnabled={true} 
    showsHorizontalScrollIndicator={false} 
    alwaysBounceHorizontal={false} 
    automaticallyAdjustContentInsets={false}> 
    <View style={{width: 200, height: 300}}></View> 
    <View style={{width: 200, height: 300}}></View> 
    <View style={{width: 200, height: 300}}></View> 
</ScrollView>

来源

2017-08-10 Giffo

我认为my answer到this SO question可能会帮助你。总之，你绝对可以用ScrollView或者更好的FlatList来创建这种布局。但是，有两个棘手的部分：

抢购效应，以便您可以使用道具snapToInterval和snapToAlignment。不幸的是，这些仅限于iOS。
不活动幻灯片的动画需要大量的自定义逻辑。

一位同事和我创建了一个插件来回答这个特殊的需求。我们最终开放了它，所以这都是你的尝试：react-native-snap-carousel。

该插件现在构建于FlatList（版本> = 3.0.0）之上，这对处理大量项目非常有用。它提供预览（你后的效果），抢购效应 iOS和Android，视差图像，RTL支持，等等。

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

react-native-snap-carousel archriss showcase

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

react-native-snap-carousel stack layout react-native-snap-carousel tinder layout

来源

2017-08-10 17:29:44 bend

所有好的，但很长轻扫滚动多个项目，这不同于'pagingEnabled'到'ScrollView' – Giffo

是，一些改动必须作出因为'ScrollView'有[一大堆局限]（https://github.com/archriss/react-native-snap-carousel/tree/flatlist#flatlist-and-scrollviews-limitations）。尽管如此，将“scrollEndDragDebounceValue”这个道具设置为“0”可能对此有所帮助。您也可以使用ScrollView的prop ['decelerationRate']（https://facebook.github.io/react-native/docs/scrollview.html#decelerationrate）（仅适用于iOS）。 – bend

我认为'3.2.1'版本更接近你期望的。请注意，我将着手在'FlatList'之上实现自定义滚动条，以便更好地定制轮播的感觉并提供丰富的交互。 – bend

反应原生ScrollView与分页+显示下一页的一部分

回答

相关问题