陣營母語：獲取FlatList當前頁面使用pagingEnabled

時，我有一個FlastList，看起來像這樣：陣營母語：獲取FlatList當前頁面使用pagingEnabled

<FlatList 
    pagingEnabled={true} 
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    data={[ {key:"A"}, {key:"B"} ]} 
    renderItem={ ({item, index}) => <MyComponent /> } 
/>

我有分量的寬度設置，以便只有一個頁面顯示了在屏幕上的一個時間。我如何確定當前頁面是什麼（或者，顯示當前組件）？

來源

2017-04-12 mathew

我有一個問題。 'pagingEnabled'來自哪裏？我不認爲它是API的一部分。 –

@NaderDabit這是一個很好的問題。它不在文檔中，但它起作用（至少現在）。我最初有一個ScrollView，它有'''pagingEnabled'''，當我轉換到FlatList時，它只是繼續工作。即使查看React Native代碼，我也不明白它爲什麼可行。我假設道具正在傳遞給底層的ScrollView，但我無法確定發生了什麼。 – mathew

啊，我發現它作爲道具傳遞給底層的scrollView。非常酷，每天學習新的東西！ https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js –

我用類似VirtualizedList的方式構建了一個組件，啓用了分頁功能。我使用ScrollView的onMomentumScrollEnd處理程序根據contentOffset確定當前頁面。當滾動動畫在用戶在頁面之間滑動後停止時，將調用onMomentumScrollEnd處理程序。它有一個類似標準onScroll事件的事件對象。您可以使用nativeEvent.contentOffset.x來確定你是在這樣的頁面：

class Example extends React.Component { 

    onScrollEnd(e) { 
    let contentOffset = e.nativeEvent.contentOffset; 
    let viewSize = e.nativeEvent.layoutMeasurement; 

    // Divide the horizontal offset by the width of the view to see which page is visible 
    let pageNum = Math.floor(contentOffset.x/viewSize.width); 
    console.log('scrolled to page ', pageNum); 
    } 

    render() { 
    return 
     <VirtualizedList 
     horizontal 
     pagingEnabled 
     onMomentumScrollEnd={this.onScrollEnd} /> 
    } 
}

我離開其他VirtualizedList道具，以節省空間。 FlatList組件基於VirtualizedList，因此該示例應該適合您。

來源

2017-04-12 14:31:22

文檔中的'''onMomentumScrollEnd'''在哪裏？我似乎無法在'''VirtualizedList'''中找到它。它是第三方庫的一部分嗎？ – mathew

沒關係，我在代碼中找到它。文檔不完整是非常令人沮喪的。您的解決方案非常棒！我還能夠繼續使用FlatList。 – mathew

是的，ScrollView事件處理程序沒有被記錄以及它們可能。 –

陣營母語：獲取FlatList當前頁面使用pagingEnabled

回答

相關問題