react native big list
Release 1.6.1
선적 서류 비치
이는 유사한 플랫리스트 사용법을 사용하여 교체를 쉽게하기 위해 복잡한 레이아웃을 지원하는 React Native의 고성능 목록보기입니다. Big List 렌더링에 대한이 목록 구현은 성능 및 메모리 사용에 중점을 둔 재활용기와 함께 React Native Works에서 작업하므로 목록에서 수천 개의 항목을 처리 할 수 있습니다.
게시 된 웹 앱 : 데모에서 시도해 볼 수도 있습니다.
React Native의 플랫리스트는 훌륭하지만 큰 목록에 관해서는 항목 캐싱으로 인해 약간의 결함이 있습니다. react-native-largelist 및 recyclerlistview 와 같은 일부 대안이 있지만 둘 다 몇 가지 문제가 있습니다.
react-native-largelist 웹 및 엑스포와 호환되지 않으며, 때로는 재 조정 및 유지 관리가 필요한 기본 코드가 있으며, 빈 항목 재활용이 없기 때문에 이상한 목록 항목 재활용이 있고, 데이터 구조 조정이 필요하며, 많은 데이터 (예 : 100,000 항목)가 CPU를 동결하기 때문에 몇 가지 문제가 있습니다.
recyclerlistview 는 수행자이지만 마운트의 빈 프레임이 마운트의 요소로 스크롤하려고 할 때 마운트의 빈 프레임으로 고통 받고 끈적 끈적한 헤더의 구현은 Animated 과 충돌합니다.
리사이클러를 사용하면 큰 데이터 세트를 효율적으로 쉽게 표시 할 수 있습니다. 데이터를 제공하고 각 항목의 모양을 정의하고 Recycler 라이브러리는 필요할 때 요소를 동적으로 생성합니다. 이름에서 알 수 있듯이 리사이클러는 이러한 개별 요소를 재활용합니다. 항목이 화면에서 스크롤하면 리사이클러가 시야를 파괴하지 않습니다. 대신, 리사이클러는 화면에 스크롤 된 새 항목에 대한보기를 재사용합니다. 이 재사용은 성능을 크게 향상시켜 앱의 응답 성을 향상시키고 전력 소비를 줄입니다.
목록이 항목을 충분히 빨리 렌더링 할 수없는 경우 렌더링되지 않은 구성 요소는 빈 공간으로 나타납니다.
이 라이브러리는 완전히 JS 기본이므로 Android, iOS, Windows, MacOS, 웹 및 엑스포와 같은 모든 플랫폼과 호환됩니다.
다음 명령 줄 중 하나를 실행하는 NPM 또는 원사에서 라이브러리를 설치하십시오.
| NPM | 방사 |
|---|---|
npm install react-native-big-list --save | yarn add react-native-big-list |
플랫리스트에서 마이그레이션하는 방법도 읽으십시오
기본 예 : 예 :
import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ; 더 많은 예를 보려면 example 디렉토리를 확인하거나 list 디렉토리를 확인하거나 문서를 확인하십시오.
| Biglist vs flatlist | 섹션 목록 |
|---|---|
 |  |
복제 또는 다운로드 레포 및 후 :
cd Example
yarn install # or npm install
expo start 장치에서 엑스포 클라이언트를 엽니 다. expo start 에서 인쇄 한 QR 코드를 스캔하는 데 사용하십시오. 프로젝트가 처음으로 번들과로드하는 동안 잠시 기다려야 할 수도 있습니다.
게시 된 웹 앱 : 데모에서 시도해 볼 수도 있습니다.
이 목록에는 특정 소품 및 방법 외에도 동일한 스크롤 뷰 소품이 있습니다.
아이디어가 있습니까? 버그를 찾았습니까? 문제를 제기하거나 요청을 당기십시오. 기부금을 환영하며 대단히 감사합니다! 모든 작은 도움이되며 신용은 항상 주어집니다.
