recyclerlistview
Version 4.2.1
이 프로젝트가 도움이된다면 스타로 우리를 지원 해주세요.
복잡한 레이아웃을 지원하는 React Native 및 웹을위한 고성능 목록보기입니다. IOS의 Android 및 UICollectionView의 RecyclerView에서 영감을 얻은 기본 의존성이없는 JS.
npm install --save recyclerlistview
최신 베타 :
npm install --save recyclerlistview@beta
참고 : 문서는 곧 업그레이드 될 예정이며, 현재 명확성 및 탐색에 대한 코드 주석을 확인하십시오. 이 구성 요소는 React Native 웹에서도 적극적으로 테스트됩니다.
RecyclerListView는 "Cell Recycling"을 사용하여 새로운보기 개체를 만드는 대신 더 이상 렌더링 할 수없는 뷰를 재사용합니다. 객체 생성은 매우 비싸고 메모리 오버 헤드가 제공됩니다. 즉, 목록을 스크롤 할 때 메모리 발자국이 계속 올라갑니다. 기억할 수없는 아이템을 메모리에서 출시하는 것은 또 다른 기술이지만 더 많은 물체와 많은 쓰레기 수집품을 생성합니다. 재활용은 성능이나 메모리 효율성을 손상시키지 않는 무한 목록을 렌더링하는 가장 좋은 방법입니다.
모든 성능 이점 외에도 RecyclerListView는 상자에 훌륭한 기능이 제공됩니다.
forceNonDeterministicRendering ).RECYCLERLISTVIEW는 성능을 염두에두고 구축되었으며 빠른 스크롤이나 프레임 방울 동안 빈 공간이 없습니다. RecyclerListView는 렌더링 해야하는 항목에 대해 결정 론적 높이를 갖도록 권장합니다. 그렇다고해서 같은 높이와 물건을 가진 모든 항목이 필요하다는 것을 의미하지는 않습니다. 데이터를보고 높이를 선불로 계산하는 방법 만 있으면 RecyclerListView가 드로우가 발생하기를 기다리지 않고 한 번의 패스로 레이아웃을 계산할 수 있습니다. 여전히 최적의 방식으로 재활용되는 다른 유형의 항목으로 모든 종류의 그리드 뷰 및 목록보기를 수행 할 수 있습니다. 타입 기반 재활용은 매우 쉽고 상자에서 나옵니다.
RECYCLERLISTVIEW에서 forceNonDeterministicRendering Prop을 미리 결정할 수없는 경우. 이제 주어진 치수를 추정치로 취급하고 항목을 조정하게합니다. 경험을 향상시키기 위해 좋은 견적을 제공하십시오.
Production Flipkart 식료품 데모 비디오 (또는 앱을 시도) : https://youtu.be/6yqeqp3mmou
무한 하중/보기 변경 (Expo) : https://snack.expo.io/@naqvitalha/rlv-demo
Mixed ViewTypes : https://snack.expo.io/b1gyad52b
ExtendedState, STableIds 및 ItemanImator (Expo) : https://snack.expo.io/@arunreddy10/19bb8e
샘플 프로젝트 : https://github.com/naqvitalha/travelmate
웹 샘플 (RNW 사용) : https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
컨텍스트 보존 샘플 : https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
기타 비디오 : https://www.youtube.com/watch?v=tnv4hmmpgmc
| 소품 | 필수의 | 매개 변수 유형 | 설명 |
|---|---|---|---|
| LayoutProvider | 예 | BaselayoutProvider | 각 요소의 레이아웃 (높이 / 폭)을 정의하는 생성자 기능 |
| Dataprovider | 예 | Dataprovider | 생성자 기능 각 요소의 데이터를 정의합니다 |
| ContextProvider | 아니요 | ContextProvider | 경우 뷰가 파괴되는 경우 스크롤 위치를 유지하는 데 사용됩니다. 종종 백비게이션에서 발생합니다. |
| Rowrenderer | 예 | (유형 : 문자열 | 번호, 데이터 : 대신, 색인 : 번호) => jsx.element | jsx.element [] | 널 | 렌더링 할 반응 구성 요소를 반환하는 메소드. 콜백에서 뷰의 유형, 데이터, 색인 및 확장 상태를 얻을 수 있습니다. |
| 초기 오프셋 | 아니요 | 숫자 | 렌더링을 시작하려는 초기 오프셋; 페이지에서 스크롤 컨텍스트를 유지하려면 매우 유용합니다. |
| RenderaheAdoffset | 아니요 | 숫자 | 뷰를 렌더링하려는 미리 픽셀 수를 지정하십시오. 이 값을 늘리면 빈 (있는 경우)을 줄이는 데 도움이 될 수 있습니다. 그러나 이것을 가능한 한 낮게 유지하는 것이 의도가되어야합니다. 값이 높을수록 재 러너 컴퓨팅이 증가합니다 |
| ishorizontal | 아니요 | 부울 | 사실이라면, 목록은 수직 대신 수평으로 작동합니다. |
| onscroll | 아니요 | rawevent : scrollevent, offsetx : number, offsety : number) => void | 사용자 스크롤로 실행되는 스크롤 콜백 함수에서 |
| onrecreate | 아니요 | (매개 변수 : onrecreateparams) => void | Context Provider에서 재활용기보기를 재현 할 때 실행되는 콜백 함수 |
| ExternalScrollView | 아니요 | {New (Props : ScrollViewDefaultProps) : BaseScrollView} | 이것을 사용하여 BaseScrollView의 구현에 전달하십시오 |
| onendreached | 아니요 | () => void | 뷰의 끝이 적힌 경우 실행 된 콜백 함수 (정의 된 경우 onendthreshold를 마이너스) |
| onendReachedThreshold | 아니요 | 숫자 | onendreached 콜백을 위해 몇 픽셀 수 지정 |
| onendreachedthresholdrelative | 아니요 | 숫자 | 끝에서 얼마나 멀리 떨어져 있는지 (목록의 보이는 길이 단위) 목록의 하단 가장자리는 컨텐츠 끝에서 onendreached 콜백을 트리거해야합니다. |
| onvisibleIndicesChanged | 아니요 | TonitemStatusChanged | 가시 지수를 제공합니다. 인상 이벤트를 보내는 데 도움이됩니다 |
| onvisibleIndexSchanged | 아니요 | TonitemStatusChanged | (2.0 베타로 더 이상 사용되지 않음) 가시적 인덱스를 제공합니다. 인상 이벤트를 보내는 데 도움이됩니다 |
| 렌더 발거 | 아니요 | () => jsx.element | jsx.element [] | 널 | 바닥 글을 렌더링하려면이 방법을 제공하십시오. 증분 하중을 수행하는 동안 로더를 보여주는 데 도움이됩니다 |
| InitialrenderIndex | 아니요 | 숫자 | 렌더링을 시작하려는 초기 항목 색인을 지정하십시오. 둘 다 지정된 경우 초기 오프셋보다 선호됩니다 |
| Scrollthrottle | 아니요 | 숫자 | iOS 만; 스로틀 지속 시간을 스크롤하십시오 |
| Canchangesize | 아니요 | 부울 | 크기가 변경 될 수 있는지 지정하십시오 |
| 거리에서 거리 | 아니요 | 숫자 | (부패한) windowShift 와 함께 applyWindowCorrection() API를 사용하십시오. 용법? |
| WindowCorrection을 적용하십시오 | 아니요 | (오프셋 : 숫자, Windowcorrection : Windowcorrection) => void | ( distanceFromWindow API의 Distone에 대한 향상/교체)는 전달 된 보정 값에 따라 가시 창 바운드를 업데이트 할 수 있습니다. 사용자는 Windowshift를 지정할 수 있습니다. 전체 RecyclerListWindow가 아래로 이동/위로 이동 해야하는 경우, STARTCORRECTION ; 상단 창 바운드를 이동하기 위해 상단 창 바운드를 이동시켜야 할 경우, 내 아래로 이동하기 위해 컨텐츠는 recyclerlistview 의 상단 가장자리와 겹치는 컨텐츠입니다. 용법? |
| Windowscroll을 사용하십시오 | 아니요 | 부울 | 웹 만; 스크롤 가능한 div 대신 창에있는 레이아웃 요소 |
| 비활성화 | 아니요 | 부울 | 재활용을 끕니다 |
| Forcenondeterministicrendering | 아니요 | 부울 | 기본값은 거짓입니다. 레이아웃 공급자에 제공된 활성화 된 치수가 엄격하게 시행되지 않습니다. 항목 치수를 정확하게 결정할 수없는 경우 이것을 사용하십시오 |
| ExtendedState | 아니요 | 물체 | 경우에 따라 행 수준에서 전달 된 데이터에 항목이 의존하는 모든 정보가 포함되어 있지 않을 수 있습니다. 다른 모든 정보를 외부로 유지 하고이 소품을 통해 전달할 수 있습니다. 이 객체를 변경하면 모든 것이 재 렌더링됩니다. 성능을 보장하기 위해 자주 변경하지 않도록하십시오. 렌즈 렌더는 무겁습니다. |
| ITEMANIMATOR | 아니요 | ITEMANIMATOR | RecyclerListView 항목 셀을 애니메이션 할 수 있습니다 (Shift, Add, Remove 등) |
| 스타일 | 아니요 | 물체 | 내부 스크롤 뷰로 스타일을 전달합니다 |
| ScrollViewProps | 아니요 | 물체 | 내부/외부 스크롤 뷰로 프록시 해야하는 모든 소품의 경우. 그것들을 물체에 넣으면 퍼져 나갈 것입니다. |
| 레이아웃 크기 | 아니요 | 차원 | ListView의 크기를 계산하는 데 필요한 초기 빈 렌더링을 방지하고 이러한 차원을 사용하여 첫 번째 렌더링 자체에서 목록 항목을 렌더링합니다. 이것은 서버 측 렌더링과 같은 경우에 유용합니다. 렌더링 후 크기를 변경할 수있는 경우 소품 CanChangesize를 true로 설정해야합니다. 이것은 스크롤보기 크기가 아니며 레이아웃에만 사용됩니다. |
| onitemlayout | 아니요 | 숫자 | RecyclerListView (인덱스)의 항목이 레이아웃 일 때 실행되는 콜백 함수. 이것은 또한 항목 렌더링 된 종류의 콜백에 대한 프록시로 사용될 수 있습니다. |
| WindowcorrectionConfig | 아니요 | 물체 | Window Correction Config와 일부 스크롤 이벤트에 적용 해야하는지 지정하는 데 사용됩니다. |
전체 기능 세트의 경우 RecyclerListView (파일 하단)의 소품 정의를 살펴보십시오. RefreshControl 과 같은 모든 ScrollView 기능도 상자에서 작동합니다.
applyWindowCorrection RecyclerListView의 가시 창 범위를 동적으로 변경하는 데 사용됩니다. 현재 스크롤 오프셋과 함께 RECYCLERLISTVIEW의 Windowcorrection이 사용자에게 노출됩니다. windowCorrection 객체는 3 가지 숫자 값으로 구성됩니다.
windowShift distanceFromWindow 를 직접 교체합니다. Window Shift는 RECYCLERLISTVIEW 전체가 StickyContainer 내에서 변위되는 오프셋 값입니다.이 매개 변수를 사용하여 첫 번째 목록 항목이 Window 상단에서 얼마나 멀리 떨어져 있는지 지정하십시오. 이 값은 스티커리스트와 리사 클레어리스트 뷰의 스크롤 오프셋을 수정합니다.startCorrection -StartCorrection은 CoordinatorLayout 도구 모음과 같은 외부 요소가있을 때에도 사용자가 올바른 스티커 헤더 인스턴스를 수신 할 수있는 상단 가시 창의 이동을 지정하는 데 사용됩니다.endCorrection 하단 가시 창의 이동을 지정하는 데 사용됩니다. 바닥 앱 막대와 같은 외부 요인이 보이는보기를 변경할 때 사용자가 올바른 스티커 바닥 글 인스턴스를받을 수 있습니다.아래 예에서 볼 수 있듯이
TypeScript는 상자 밖으로 작동합니다. 유일한 실행은 상속 된 스크롤 뷰 소품입니다. TypeScript가 상속 된 스크롤 뷰 소품으로 작동하려면 ScrollViewProps 소품 내에 상속 된 스크롤 뷰 소품을 배치해야합니다.
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/web EG에서 가져 오기 시작, import { RecyclerListView } from "recyclerlistview/web" . 가져 오기 경로를 보존하려면 별칭을 사용하십시오. 플랫폼 특정 코드 만 빌드의 일부이므로 불필요한 코드는 앱과 함께 배송되지 않습니다.requestAnimationFrame , ResizeObserver 아파치 v2.0
만난 버그에 대한 문제를 열어주십시오. 트위터 @Naqvitalha에서 나에게 연락하거나 [email protected]에 글을 쓰면 질문이 있으시면 문의하십시오.
