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} 
     /> 
    ) 
    } 
}