反应本机滚动视图与分页 + 显示下一页的一部分

Question

我正在尝试创建一个界面，一次向用户显示一张卡片。用户可以以分页方式左右滚动。我还想查看当前卡片左侧和右侧的少量卡片，以提示还有更多内容要看。一个非常粗略的例子是：

当前代码是：

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

Answer 1

我认为 to 可能会对您有所帮助。

总而言之，您绝对可以使用 ScrollView 甚至 FlatList 创建这种布局。但是，有两个棘手的部分：

捕捉效果，可以使用道具snapToInterval and snapToAlignment。不幸的是，这些是 iOS-only.
非活动幻灯片的动画，需要大量自定义逻辑

A co-worker 我创建了一个插件来满足这一特殊需求。我们最终 open-sourcing 它，所以你可以尝试：react-native-snap-carousel.

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

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

编辑：two new layouts 已在版本 3.6.0 中引入（一个具有堆叠效果，另一个具有 tinder-like 效果）。享受吧！

反应本机滚动视图与分页 + 显示下一页的一部分

React Native ScrollView with pagination + showing part of the next page

javascript

react-native

react-native-ios