react-native - 在 react-native 中实现双向无限 ScrellView

Question

我想在两个方向上实现无限 ScrollView 。此外，数据应动态加载。

我正在使用 SectionList 组件作为列表。我已经实现了向前无限滚动。这意味着如果用户向下滚动，数据将自动附加到列表中。

为此，我使用了 onMomentumScrollEnd 事件。当用户停止滚动时，如果向上滚动，数据将附加在末尾，如果滚动向下，数据将附加在顶部。

现在的问题是当我在列表顶部附加数据时，它将所有当前列表数据向后移动。即使数据更新，我也不想移动当前列表。有什么办法可以做到。

这是我的代码:

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    SectionList,
} from 'react-native';
import CardComponent from './CardComponent'

export default class Schedule extends Component {
    constructor(props) {
        super(props);
        this.state = {
          sectionData: [],
          loading: false,
        }
        this.contentOffsetY = 0;
        this._onScroll = this._onScroll.bind(this)
    }
    
    componentDidMount() {
        this.setState({ sectionData: this.props.data })
    }
    
    renderItem = ({item}) => (
        <CardComponent
            data={item}
            key={item}
        />
    );
    
    renderDateSeparator(text) {
        return (
            <Text style={{
                    paddingVertical: 15,
                    fontSize: 14,
                    flex: 1,
                    textAlign: 'center',
                    textAlignVertical: 'center',
                }}>
               {text}
            <Text>
        )
    }
    
    _onScroll(e){
        let contentOffset = e.nativeEvent.contentOffset.y;
        this.contentOffsetY < contentOffset ? this.loadMoreOnBottom() : this.loadMoreOnTop();
        this.contentOffsetY = contentOffset;
    }
    
    loadMoreOnTop() {
      this.setState({ lodaing: true });
      // code to append data on top of list
      this.setState({ lodaing: false });
    }
    
    loadMoreOnBottom() {
      // code to append data at bottom of list
    }
    
    render() {
      const sectionData = this.state.sectionData;
      return(
        <View style={{flex: 1}}>
          <SectionList
                onMomentumScrollEnd={this._onScroll}
                automaticallyAdjustContentInsets={false}
                itemShouldUpdate={false}
                renderItem={this.renderItem}
                renderSectionHeader={({section}) => this.renderDateSeparator(section.date)}
                sections={sectionData}
                stickySectionHeadersEnabled={false}
                refreshing={this.state.loading}
                onRefresh={() => this.loadMoreOnTop()}
                onEndReachedThreshold={0.3}
                onEndReached={() => this.loadMoreOnBottom()}
                keyExtractor={(item) => item.key}
            />
        </View>
      )
    }
}

提前致谢。

Answer 1

经过这么多的研究，我终于在 react-native 中实现了双向无限 ScrollView 。

为了实现，我已经替换了我的 SectionList与 FlatList , 因为我想使用在 SectionList 中不能正常工作的 scrollToOffset 方法。

我用过 setInterval javaScript 的函数。它会定期检查列表是否需要从顶部或底部附加。

这是我的代码:

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    FlatList,
    Dimensions,
} from 'react-native';
import CardComponent from './CardComponent'

let {height, width} = Dimensions.get('window');

export default class Schedule extends Component {
    constructor(props) {
        super(props);
        this.state = {
          listData: [],
        }
        this.contentOffsetY = 0;
        this.pageOffsetY = 0;
        this.contentHeight = 0;
        
        this._onScroll = this._onScroll.bind(this);
        this.loadMoreOnTop = this.loadMoreOnTop.bind(this);
        this.loadMoreOnBottom = this.loadMoreOnBottom.bind(this);
    }
    
    componentDidMount() {
        this.setState({ listData: this.props.data });
        this._interval = setInterval(() => {
            this.setState({ load: true });
        }, 2000);
    }

    componentWillUnmount() {
        clearInterval(this._interval);
    }

    renderItem = ({item}) => (
        <CardComponent
            data={item}
            key={item}
        />
    );
    
    _onScroll(e){
        let contentOffset = e.nativeEvent.contentOffset.y;
        this.contentOffsetY < contentOffset ? this.loadMoreOnBottom() : this.loadMoreOnTop();
        this.contentOffsetY = contentOffset;
    }
        
    scrollToOffset = (offset) => {
        this.flatListRef ? this.flatListRef.scrollToOffset({animated: false, offset}) : null;
    };

    loadMoreOnTop() {
      let newOffset;
      
      // code to append data on top of list
      
      // calculate newOffset:
      newOffset = this.pageOffsetY + space required for new data.

      this.contentOffsetY = newOffset;
      this.scrollToOffset(newOffset);
    }
    
    loadMoreOnBottom() {
      // code to append data at bottom of list
    }
    
    render() {
      const listData = this.state.listData;
      
      if(this.pageOffsetY < 600) {
          this.loadMoreOnTop();
      } else if((this.contentHeight - this.pageOffsetY) < (height * 1.5)){
          this.loadMoreOnBottom();
      }
      return(
        <View style={{flex: 1}}>
          <FlatList
                onScroll={(e) => {
                    this.pageOffsetY = e.nativeEvent.contentOffset.y;
                    this.contentHeight = e.nativeEvent.contentSize.height;
                    return null;
                }}
                onMomentumScrollEnd={this._onScroll}
                automaticallyAdjustContentInsets={false}
                itemShouldUpdate={false}
                renderItem={this.renderItem}
                data={listData}
                refreshing={false}
                onRefresh={() => this.loadMoreOnTop()}
                onEndReachedThreshold={0.3}
                onEndReached={() => this.loadMoreOnBottom()}
                keyExtractor={(item) => item.key}
                ref={(ref) => { this.flatListRef = ref; }}
                animated={false}
            />
        </View>
      )
    }
}