React Native ScrollView with pagination +显示下一页的一部分

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创建此类布局。但是，有两个棘手的部分：

• 捕捉效果，您可以使用道具snapToInterval和snapToAlignment。不幸的是，这些只是iOS版本。

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

一位同事和我创建了一个满足这一特殊需求的插件。我们最终开源了，所以你可以试试：react-native-snap-carousel。

该插件现在构建在FlatList（版本＆gt; = 3.0.0）之上，非常适合处理大量项目。它为iOS和Android提供了预览（你所效应的效果），捕捉效果，视差图片， RTL支持等等。

您可以查看showcase以了解可以通过它实现的目标。不要犹豫与插件分享您的经验，因为我们总是试图改进它。

编辑：two new layouts已在版本3.6.0中引入（一个具有一叠卡片效果，另一个具有类似火种的效果）。享受！