React原生無窮視圖尋呼機

Question

我需要創建無限視圖尋呼機來顯示日曆天，並添加一個用戶交換左/右和更改日期的功能。

正如我在文檔中看到的那樣，視圖尋呼機只能使用預設的視圖數量，並且還要研究一些開源軟件包 - 無法找到任何相關信息。

所以我的問題 - 我該如何實現日曆的無限刷卡（或者有可能）？

Answer 1

我有一個用VirtualizedList製作的無限viewpager。它適用於iOS和Android。

import React, { Component } from 'react' 
import { View, Text, Dimensions, VirtualizedList } from 'react-native' 

const { width, height } = Dimensions.get('window') 
const startAtIndex = 5000 
const stupidList = new Array(startAtIndex * 2) 

class InfiniteViewPager extends Component { 
    //only use if you want current page 
    _onScrollEnd(e) { 
    // const contentOffset = e.nativeEvent.contentOffset 
    // const viewSize = e.nativeEvent.layoutMeasurement 
    // // Divide the horizontal offset by the width of the view to see which page is visible 
    // const pageNum = Math.floor(contentOffset.x/viewSize.width) 
    } 
    _renderPage(info) { 
    const { index } = info 

    return (
     <View style={{ width, height }}> 
     <Text> 
      {' '}{`index:${index}`}{' '} 
     </Text> 
     </View> 
    ) 
    } 
    render() { 
    return (
     <VirtualizedList 
     horizontal 
     pagingEnabled 
     initialNumToRender={3} 
     getItemCount={data => data.length} 
     data={stupidList} 
     initialScrollIndex={startAtIndex} 
     keyExtractor={(item, index) => index} 
     getItemLayout={(data, index) => ({ 
      length: width, 
      offset: width * index, 
      index, 
     })} 
     maxToRenderPerBatch={1} 
     windowSize={1} 
     getItem={(data, index) => ({ index })} 
     renderItem={this._renderPage} 
     onMomentumScrollEnd={this._onScrollEnd} 
     /> 
    ) 
    } 
}