네이티브 무한대보기 호출기에 응답하십시오.

Question

무한대보기 호출기를 만들어 달력 날짜를 표시하고 왼쪽/오른쪽 및 날짜를 ​​바꿀 수있는 능력을 사용자에게 추가해야합니다.

문서에서 볼 수 있듯이보기 호출기는 미리 설정된 수의보기로만 작동하며 일부 오픈 소스 패키지도 조사합니다.

그래서 내 질문 - 은 어떻게 달력 강타 무한대를 구현할 수 있습니다 (또는 전혀 가능)?

Answer 1

저는 VirtualizedList로 만든 무한한 뷰 페이지가 있습니다. Android의 iOS에서 작동합니다.

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