react-native
목록보기

간단한 예

ListView - 변화하는 데이터를 세로로 스크롤하는 목록을 효율적으로 표시하기 위해 설계된 핵심 구성 요소입니다. 최소한의 API는 ListView.DataSource를 만들고 데이터 블롭의 간단한 배열로 채우고 해당 데이터 소스로 ListView 구성 요소를 인스턴스화하고 데이터 배열에서 BLOB를 가져와 renderable 구성 요소를 반환하는 renderRow 콜백입니다.

최소 예 :

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView는 또한 끈끈한 섹션 헤더, 머리말과 꼬리말 지원, 사용 가능한 데이터 (onEndReached)의 끝에 도달 할 때의 콜백 및 장치 뷰포트 변경 (onChangeVisibleRows)에 표시되는 행 집합에 대한 섹션을 비롯한 고급 기능을 지원합니다. 여러 성능 최적화.

잠재적으로 매우 큰 (또는 개념적으로 무한한) 데이터 세트를 동적으로로드하면서 ListView를 부드럽게 스크롤하도록 설계된 몇 가지 성능 연산이 있습니다.

• 변경된 행만 다시 렌더링합니다. 데이터 소스에 제공된 rowHasChanged 함수는 소스 데이터가 변경 되었기 때문에 행을 다시 렌더링해야하는지 ListView에 알립니다. 자세한 내용은 ListViewDataSource를 참조하십시오.
• 속도 제한 행 렌더링 - 기본적으로 이벤트 루프 당 하나의 행만 렌더링됩니다 (pageSize 소품으로 사용자 정의 가능). 이렇게하면 작업을 작은 청크로 분할하여 행을 렌더링하는 동안 프레임을 삭제할 가능성을 줄일 수 있습니다.