리액트네이티브 리스트 React Native FlatList Component - #2

이전글 바로가기 

react-native-elements 라이브러리를 설치한다. 

1

npm install --save react-native-elements

cs

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
 
class FlatListDemo extends Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
            loading:false,
            data: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
        };
    }
 
 
    componentDidMount() {
        this.makeRemoteRequest();
    }
 
    makeRemoteRequest = () => {
        const {page, seed} = this.state;
        const url = 'https://randomuser.me/api/?seed=${seed}&page=${page}&results=20';
        this.setState({loading: true});
 
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: page === 1 ? response.results : [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                refreshing: false
              });
        })
        .catch(error => {
            this.setState({error, loading: false});
        })
    }
 
 
 
      render() {
        return (
        <List>
            <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                  title={`${item.name.first} ${item.name.last}`}
                  subtitle={item.email}
                  avatar={{ uri: item.picture.thumbnail }}
                />
              )}
              keyExtractor={item => item.email}
            />
         <List/>
        
        );
      }
    
    
}
 
 
export default FlatListDemo;
 

[FlatListDemo.js]

생성자 함수에 state 값을 초기화한다. loading(로딩여부), data(dataSource), page or seed (스크롤페이징하기위해서 필요한 파라메터), refreshing (리플레쉬여부) , makeRemoteRequest 는  API로부터 데이터를 가져오기 위한 함수이다.  List, ListItem은 react-native-elements 제공하는 UI 라이브러리이다.

title은 리스트의제목, subTitle은 subtitle 또는 View 에해당하는 내용을 지정하며, avatar 속성은 React Native Image Source 사용할때 지정하는 속성이다. 

roundAvatar 속성을 지정하면 Image 가 둥글게 영역이 지정되서 보인다.

keyExtractor 속성에 경우 기본으로 지정된 key값대신에 action을 지정했을경우에 ID값을 지정할 수 있다. 

[roundAvatar 지정되지않은경우]

[roundAvatar 지정된경우]

Lists, ListItem을 사용하면, 리스트형태에 UI를 빠르고 간편하게 만들 수 있다. 

화면 최상단, 최하단에 구분선을 삭제할경우 아래와같이 추가로 코드를 수정해야한다. 

render() {
        return (
          <List
            containerStyle={{borderTopWidth : 0, borderBottomWidth : 0}}
          >
            <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}}
                />
              )}
              keyExtractor={item => item.email}
              ItemSeparatorComponent={this.renderSeparator}
            />
          </List>
        
        );
      }

List, ListItem containerStyle TopWidth, BottomWidth 값을 0으로 바꾼다. 

ItemSeparatorComponent 메서드를 아래와 같이 구현한다. 

renderSeparator = () => {                               
        return (
          <View
            style={{
              height: 1,
              width: "86%",
              backgroundColor: "#CED0CE",
              marginLeft: "14%"
            }}
          />
        );
      };

Header와 Footer를 추가해보자 .

      renderHeader = () => {
        return <SearchBar placeholder="Type Here..." lightTheme round />;
      };
    
      renderFooter = () => {
        if (!this.state.loading) return null;
    
        return (
          <View
            style={{
              paddingVertical: 20,
              borderTopWidth: 1,
              borderColor: "#CED0CE"
            }}
          >
            <ActivityIndicator animating size="large" />
          </View>
        );
      };
 

<FlatList
            
              ... 
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
            />

ListHeaderComponent, ListFooterComponent 속성에 함수들을 연결시킨다. 

원문링크