反應原生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與分頁+顯示下一頁的一部分

回答

相關問題