反応ネイティブの双方向無限ScrellViewの実装

Question

双方向に無限スクロールビューを実装したいと思います。また、データを動的にロードする必要があります。

私はセクションリストコンポーネントを使用しています。私は前方無限スクロールを実装しました。つまり、ユーザーが下にスクロールすると、データが自動的にリストに追加されます。

私は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

私は最終的に反応ネイティブの双方向無限スクロールビューを実装しました。私はきちんとSectionListに動作していないscrollToOffsetメソッドを使用したいので、実装のために

は、私は、私の SectionList FlatListに置き換えられています。

私は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> 
 
    ) 
 
    } 
 
}