reactjs - react native 无限 View 寻呼机

Question

我需要创建无限 View 寻呼机来显示日历日，并为用户添加左/右交换和更改日期的功能。

正如我在文档中看到的， View 分页器仅适用于预设数量的 View ，并且还研究了一些开源包 - 找不到任何相关信息。

所以我的问题 - 如何实现日历的无限滑动(或者是否可能)？

Answer 1

我有一个用 VirtualizedList 制作的无限 View 页面。它适用于 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}
      />
    )
  }
}