1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 리스트뷰 사용하기

리스트뷰 사용하기

ListView 컴포넌트는 다르지만 비슷하게 구조화 된 데이터를 세로 스크롤 리스트로 표시합니다.

ListView는 시간이 지남에 따라 항목 수가 늘어날 수 있는 긴 데이터 목록에 적합합니다. 보다 일반적인 ScrollView와 달리 ListView는 현재 모든 요소가 화면에 표시되는 요소만 렌더링합니다.

ListView 컴포넌트에는 dataSource 및 renderRow라는 두 개의 prop이 필요합니다. dataSource는 목록 정보 소스입니다. renderRow는 소스에서 하나의 항목을 취해 렌더링 할 형식이 지정된 컴포넌트를 반환합니다.

이 예제는 하드 코딩된 데이터의 간단한 ListView를 생성합니다. 먼저 ListView를 채우는 데 사용할 dataSource를 초기화합니다. dataSource의 각 항목은 Text 컴포넌트로 렌더링됩니다. 마지막으로 ListView 및 모든 텍스트 컴포넌트를 렌더링 합니다.

ListView를 사용하려면 rowHasChanged 함수가 필요합니다. 여기서 우리는 행이 이전 행과 같지 않으면 행이 변경되었다고 말합니다.

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
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

ListView의 가장 일반적인 용도 중 하나는 서버에서 가져오는 데이터를 표시하는 것입니다. 이를 위해서는 React Native의 네트워킹에 대해 알아야 합니다.

Was this article helpful to you? Yes No

How can we help?