>

양방향으로 무한 스크롤보기를 구현하고 싶습니다. 또한 데이터는 동적으로로드되어야합니다.

목록에SectionList구성 요소를 사용하고 있습니다. 앞으로 무한 스크롤을 구현했습니다. 즉, 사용자가 아래로 스크롤하면 데이터가 목록에 자동으로 추가됩니다.

이를 위해onMomentumScrollEnd이벤트를 사용했습니다. 사용자가 스크롤을 중지하면 스크롤이 위쪽 방향 인 경우 데이터가 끝에 추가되고 스크롤이 아래쪽 방향 인 경우 데이터가 맨 위에 추가됩니다.

이제 문제는 Top of list에 데이터를 추가 할 때 모든 현재 목록 데이터를 뒤로 이동하는 것입니다. 데이터가 업데이트 되어도 현재 목록을 이동하고 싶지 않습니다. 그것을 할 방법이 있습니까?

이것은 내 코드입니다 :

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

미리 감사합니다.


  • 답변 # 1

    많은 연구 끝에 마침내 양방향 무한 스크롤 뷰를 반응 네이티브로 구현했습니다.

    구현을 위해 SectionList 를 교체했습니다.   FlatList 와 함께 SectionList에서 제대로 작동하지 않는scrollToOffset메소드를 사용하고 싶기 때문에

    setInterval 를 사용했습니다  자바 스크립트의 기능. 정기적으로 날씨를 확인하여 목록을 상단 또는 하단에서 추가해야합니다.

    이것은 내 코드입니다 :

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

  • 이전 javascript - vue js에서 라디오 버튼을 사용할 때 v 모델이 업데이트되지 않습니까?
  • 다음 c - 메모리 할당?