2017-03-18 21 views
1

無限のビューページャを作成してカレンダーの日を表示し、左右にスワップして日付を変更する機能を追加する必要があります。ネイティブ無限ビューのページャに反応します

ドキュメントにあるように、ビューページャーはプリセット数だけで動作し、いくつかのオープンソースパッケージも調査します。そのことについては何も見つかりません。

私の質問 - どのように私はカレンダーの無限スワイプを実装できますか(または、それはまったく可能です)

答えて

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} 
     /> 
    ) 
    } 
} 
関連する問題