리액트네이티브 리스트 React Native FlatList Infinite Scroll  - #4 (무한스크롤)

React & React Native 2019. 1. 12. 22:05

FlatList에서 무한 스크롤은 onEndReachedThreshold와 onEndReached prop을 통해 구현 한다.

스크롤이 onEndReachedThreshold에 설정한 값에 도달하면 onEndReachd 메서드가 실행된다.

onEndReachedThreshold 는 스크롤 목록이 보이는 가장자리 길이 기준으로 목록의 아래쪽 가장자리가 콘텐츠이 끝에서부터 onEndReached 콜백을 트리거한다. 이 값이 0.5인경우 목록이 보이는 길이의 절반내에 있을때 onEndReached 메서드를 실행한다.



1
2
3
4
5
6
<FlatList
              data={this.state.data}
       
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0}
            />

cs



1
2
3
4
5
6
7
8
9
10
 handleLoadMore = () => {
        this.setState(
          {
            page: this.state.page + 1
          },
          () => {
            this.makeRemoteRequest();
          }
        );
      };
cs



onEndReachedThreshold 값이 클수록 스크롤영역이 끝에 닿기전에 데이터를 요청하게끔 되어있다.



원문출처

저작자표시

'React & React Native ' 카테고리의 다른 글

React Native Geolocation 사용하기 [ React Native 위도 경도 구하기]  (0) 2019.01.15
React Native Maps 사용하기 , 리액트네이티브 맵, install react-native-maps  (0) 2019.01.15
리액트네이티브 리스트 React Native FlatList Component  - #3 (Pull to Refresh )  (0) 2019.01.12
React Native Splash Screen (스플래쉬 화면)  (0) 2019.01.11
React Native Image Component 사용하기  (0) 2019.01.11
블로그 이미지

클라인STR

,

리액트네이티브 리스트 React Native FlatList Component  - #3 (Pull to Refresh )

React & React Native 2019. 1. 12. 18:25

이전글 보러가기 

 React Native FlatList Component  - #1

 React Native FlatList Component  - #2 




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.state = {
            
            refreshing: false
        };
 
 
 this.setState({
                
                refreshing: false
              });
 
 
 .catch(error => {
            this.setState({error, loading: false});
})


cs


state 값에 refreshing 플래그를 추가한다. 데이터를 새로 받아오거나, 오류가난경우 플래그를 false 초기화하는 코드를 추가한다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                  roundAvatar
                  title={`${item.name.first} ${item.name.last}`}
                  subtitle={item.email}
                  avatar={{ uri: item.picture.thumbnail }}
                  containerStyle={{borderBottomWidth:0}}
                />
              )}
              
              . . . 
              refreshing={this.state.refreshing}
              onRefresh={this.handleRefresh}
            />
cs


refreshing 값을 state refreshing 값으로 설정하고, onRefresh refresh 메서드를 지정하고 아래와 같이 메서드를 구성한다.



1
2
3
4
5
6
7
8
9
10
11
12
 handleRefresh = () => {
        this.setState(
          {
            page: 1,
            seed: this.state.seed + 1,
            refreshing: true
          },
          () => {
            this.makeRemoteRequest();
          }
        );
      };
cs


page 값을 초기화 시키고, refreshing 값을 true로 변환한다. 데이터 조회 함수를 호출한다. 




원문출처

ReactNative Doc FlatList

저작자표시

'React & React Native ' 카테고리의 다른 글

React Native Maps 사용하기 , 리액트네이티브 맵, install react-native-maps  (0) 2019.01.15
리액트네이티브 리스트 React Native FlatList Infinite Scroll  - #4 (무한스크롤)  (0) 2019.01.12
React Native Splash Screen (스플래쉬 화면)  (0) 2019.01.11
React Native Image Component 사용하기  (0) 2019.01.11
React props  (0) 2019.01.10
블로그 이미지

클라인STR

,

연봉탐색기2019 사용해보기

사는이야기 2019. 1. 12. 09:41

어제 하루종일 포털사이트를 장악한 검색어는 연봉탐색기이다. 몇년전에 나는 어떠한 이유로 한국납세자 연맹에 회원가입했었다. 어제는 사이트 접속이되지않았지만 하루가 지난 오늘 조회해보기로 하였다. 


연봉탐색기를 사용하려면 납세자연맹 이란곳에 회원가입이 되어있어야된다.


연봉탐색기 2019 바로가기




연봉탐색기에 접속하면 9가지 항목에대해서 분석자료를 제공한다. 




연봉을 숫자만 입력한다. 




연봉에 대한 순위가 나타난다. 





실수령과 공제액 근로소득세 실효세율을 확인할 수 있다.



공제액 항목중, 연,월, 비율에 대한 내역을 볼수있다. 






신용카드 소득공제와 세테크팁에 대한내용은 유용할수 있을거같다. 공제를 받기위해 최소한의 한도만 지출하면 되기때문이다. 





호기심에 한번 조회해봤는데, 이용후기글을 보면 호불호가 많이 갈리는것 같다.

저작자표시 비영리 변경금지

'사는이야기' 카테고리의 다른 글

티스토리 안전하지 않은 콘텐츠 차단됨 뜨는 이유  (3) 2019.01.21
유트브 자막다운로드 하는 방법  (0) 2019.01.13
잦은 방귀를 유도하는 음식들  (0) 2019.01.10
2019년 신년 무료운세 Yes24  (0) 2019.01.08
흥국화재 실비보험 신청하기 [우편접수 및 팩스] [부모님 실비보험 신청]  (0) 2019.01.07
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2019/01   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

티스토리툴바