javascript - react native ScrollView 与分页 + 显示下一页的一部分

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

我认为 my answer至 this SO question可能对你有帮助。

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

• 捕捉效果，您可以使用 Prop snapToInterval和 snapToAlignment .不幸的是，这些仅适用于 iOS。

• 非事件幻灯片的动画，需要大量自定义逻辑。

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

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

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

---

编辑:two new layouts已在版本 3.6.0 中引入(一个具有一叠纸牌效果，另一个具有类似火种的效果)。享受吧!