反应原生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>
`
答
我认为my answer到this SO question可能会帮助你。总之,你绝对可以用ScrollView
或者更好的FlatList
来创建这种布局。但是,有两个棘手的部分:
抢购效应,以便您可以使用道具
snapToInterval
和snapToAlignment
。不幸的是,这些仅限于iOS。不活动幻灯片的动画需要大量的自定义逻辑。
一位同事和我创建了一个插件来回答这个特殊的需求。我们最终开放了它,所以这都是你的尝试:react-native-snap-carousel
。
该插件现在构建于FlatList
(版本> = 3.0.0)之上,这对处理大量项目非常有用。它提供预览(你后的效果),抢购效应 iOS和Android,视差图像,RTL支持,等等。
您可以查看showcase以了解可以实现的功能。不要犹豫,与我们分享您的经验,因为我们一直在努力改进它。
编辑:two new layouts已在3.6.0
版本被引入(其中一个带卡效果的堆叠,而另一个具有一个打火样作用)。请享用!
所有好的,但很长轻扫滚动多个项目,这不同于'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