React-native-snap-carousel: FlatList를 다른 구성 요소로 바꾸시겠습니까?

두 가지 주요 단점 :

• 첫 번째는 ScrollView 확장합니다.
• 두 번째 플러그인은 기본 플러그인이지만 캐 러셀 (스크롤 기간, 스크롤 콜백 ...)을 크게 개선 할 FlatList 의 누락 된 기능을 구현하지 않습니다.

솔직히 FlatList 사용할 수 없습니다. react-native-snap-carousel (내가 BTW를 좋아함)에 대한 해결 방법은 initialNumToRender 을 data.length 입니다. 이것이 버그없는 버전을 얻는 유일한 방법입니다.
이것은 내 설치 후 스크립트의 일부입니다.

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

이제 react-native-snap-carousel initialNumToRender 가 외부에서 Carousel.js 를 패치 할 필요가 없습니다.
나는 또한 것을 주장 할 것이다 Carousel.js 설정할 수 있습니다 initialNumToRender 에 data.length 항목의 예상 번호 100 (모든 사용 사례의 아마 90 %) 미만인 경우 기본적으로.

위에서 찾은 두 라이브러리 중 react-native-largelist 매우 흥미 롭습니다. 누락 된 기능을 해결하거나 작성자가 추가하도록 설득 할 수 있습니까?

안녕하세요 @PublicParadise ,

음, initialNumToRender 는 재정의 가능한 소품의 일부이므로 패치없이 <Carousel initialNumToRender={data.length} /> 를 사용할 수 있어야합니다. ;-) 시도해 보았으므로 제대로 작동하는지 보장 할 수 있습니다. # 235.

그러나 그렇게해야하고 따라서 FlatList 와 함께 제공 되는 성능 최적화를 잊을 준비가 되었으면 useScrollView 를 true 설정하는 것이 좋습니다 FlatList 를 완전히 우회하기 위해이 소품을 도입했습니다. 또한, 같은 멋진 기능을 도입 할 수 있습니다 이것 : P

제가 고려하고있는 두 가지 플러그인에 관해서는 먼저 많은 테스트를 실행해야합니다. react-native-largelist 의 작성자가 누락되었지만 필요한 기능을 구현하도록 설득 할 수 있다면 확실히 도움이 될 것입니다!

저자가 그만두면 유지 할 수 없기 때문에 (JS를 인수하는 데 문제가 없지만) 현재로서는 네이티브 플러그인을 기반으로 자체 플러그인을 기반으로 자신이 없다고 생각합니다.

안녕하세요 @ bd-arc,

팁 주셔서 감사합니다. 솔직히 말해서 FlatList 너무 답답해서 핵을 배치하고 구성 요소를 다시는 건드리지 않았습니다. 그 당시 initialNumToRender 는 재정의 할 수있는 소품이 아니었고 useScrollView 는 더 나은 것 같습니다.

FlatList 에 Animated 대한 이상한 종속성이있는 것 같습니다. 아마도 대부분의 사람들이 문제를 겪는 곳일 것입니다. 불과 6 일 전에 누군가가 그것에 대해 새로운 버그 를

나 자신도 FlatList 를 교체하려고했고 몇 가지 조사를했습니다. 목록을 창으로 만들고보기에있는 것을 렌더링하는 것은 어려운 문제로 간주되지 않는 것 같습니다. RxJS / most.js 솔루션이 가장 마음에 들었습니다.

이 두 가지 솔루션 중 하나를 대체로 구현하는 데 행운이 있었습니까?

아니요, 조사 만했습니다. 그 당시 나는 그들이 결국 FlatList 고칠 것이라고 여전히 바라고있었습니다.
내 연구에서 얻은 몇 가지 링크를 공유하겠습니다.

• RxJS Observable을 사용한 반응 형 프로그래밍의 Naive Infinite 스크롤
• React와 함께 RxJS 사용
• 고성능 React 네이티브 목록보기를위한 재활용 행
• 네이티브 ListView 실험에 반응
• cycle.js를 사용하여 테이블 스크롤
• Bacon.js로 무한 스크롤 목록 만들기
• 무한 베이컨을 rxjs로 대략적으로 번역

하지만 기본 플러그인 ( react-native-largelist )이 올바른 방법이라고 생각합니다.

연구를 공유해 주셔서 감사합니다 👍

솔직히 말해서 지금은이 모든 것을 시험해볼 시간이 없습니다. react-native-largelist 뛰어 들고 싶다면 큰 도움이 될 것입니다. 그렇지 않다면 서로 게시하도록합시다 ;-)

업데이트 : 링크를 파헤 치면서 wix.com Tal Kol 에 정말 좋은 Medium 블로그가 있다는 것을 깨달았습니다. 지금까지 나는 그의 모든 기사를 좋아합니다. 이것은 또한 우리의 토론과 관련이있을 수 있습니다.

• React Native ListView 성능 재검토 — 브리지없이 재활용
• BindingListView-직접보기 바인딩을 지원하는 React Native ListView 실험적 구현

@ bd-arc 여기와 마찬가지로, 나는 꽤 까다로운 일을하고 있으며 시간과 자원이 제한되어 있습니다.
BindingListView 있습니다. 하지만 예 : 서로를 루프에 유지합시다 :)

예, Tal Kol은 React Native 및 성능 최적화에 대한 최고 품질의 기사를 작성했습니다.

또한 Wix의 플러그인 react-native-interactable 에 특히 관심이 있었지만 안타깝게도 최근에는 성가신 문제를 해결할 시간이 없었습니다.

@ bd-arc recyclerlistview 확장 ScrollView 의 문제점은 무엇입니까? large-list 및 FlatList 모두 동일하게 빌드됩니다.
나는 recyclerlistview를 작성했고 최근에 우리 팀은이 캐 러셀 구성 요소를 사용했습니다. FlatList를 recyclerlistview로 바꾸었고 훌륭하게 작동합니다.

안녕하세요 @naqvitalha , 빛나 주셔서 감사합니다!

내 경험과 지금까지 ScrollView 기반으로 구축 된 모든 항목은 처리 할 항목 및 / 또는 기능 제한이 엄청나게 많을 때 궁극적으로 성능 제한을 보여줍니다. 그러나 내 목표는 틀린 것으로 입증되는 것이므로 안심하십시오 ;-)

광범위하고 철저하게 테스트 할 수 있도록이 진화에 대한 PR을 제출하는 데 관심이 있습니까?

@ bd-arc 물론입니다. 그렇게하겠습니다.

@naqvitalha @ bd-arc flatlist 를 recyclerlistview 로 대체하기위한 PR의 상태 업데이트가 있습니까? 나는 그것을 사용하고 싶다

ScrollView FlatList 및 recyclerlistview 와 관련이 없지만 react-native-gesture-handler 가이 lib를 개선 할 수있는 방법을 살펴본 사람이 있습니까?

문서에서 :

이 라이브러리를 사용하면 제스처가 더 이상 JS 응답자 시스템에 의해 제어되지 않고 대신 UI 스레드에서 인식되고 추적됩니다. 터치 상호 작용 및 제스처 추적이 원활 할뿐만 아니라 신뢰할 수 있고 결정적입니다.

react-native link 이 필요합니다.이 lib 종속성을 무료로 유지한다는 점에서 불행한 일입니다. 그러나 현재 Expo / CRNA에 포함됩니다.

안녕하세요 @ pcooney10 ,

이전에 ScrollView / FlatList 위에 사용자 지정 PanResponder 구현을 고려했습니다 (# 40에서 볼 수 있음).

react-native-gesture-handler 비슷한 것을 시도해 보셨습니까? 이것이 합법적 인 아이디어인지 아니면 광기의 직접적인 방법인지 판단하기 위해 피드백을 받고 싶습니다.

@amitassaraf 이 컴포넌트의 계약은 props가 전달되기 때문에 FlatList와 매우 유사합니다. RLV 레이아웃 공급자는 필수입니다. 브레이킹 체인지이거나 새로운 모드를 도입해야합니다.

안녕하세요 여러분,이 구성 요소를 사용한 경험을 조금 공유하고 싶습니다. ScrollView 내에서 사용해야했는데, removeClippedSubviews 속성을 나타내는 것보다 모든 항목이 더 많이 표시된다는 문제가 발생했습니다. 요소가 메모리에서 삭제되지 않습니다. 그렇지 않으면 각 경로가 앱이 Android 에서 RAM 메모리를 소모하도록하는 새 요소를 생성했습니다. ScrollView ( 또는 다른 목록 ) 내 목록의 올바른 작업을 얻으려면 다음 FlatList 속성을 사용하세요.

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

귀하의 경우에 따라 귀하의 필요에 가장 적합한 값을 구성 할 수 있습니다. 이런 식으로 거의 메모리 누수 없이 예상되는 성능을 얻을 수 있습니다.

@ machester4 결과를 공유해 주셔서 감사합니다! 이 값은 모든 사람의 사용 사례에 맞지 않지만 접근 방식은 건전합니다 ;-)

해당 논리를 수직 목록 내에있는 수평 목록에 적용 할 수 있습니다. 제 경우에는 모든 가로 목록에 한 번에 3 개의 요소가 표시됩니다. 이러한 이유로 값은 maxToRenderPerBatch 이고 initialNumToRender 는 4 에 있으며 사용자에게 더 나은 경험을 제공합니다.

@naqvitalha FlatList를 캐 러셀 내부에서 RecylerView로 대체 한 방법을 공유해 주시겠습니까? 또한 RecyclerView에서 https://github.com/facebook/react-native/issues/20500 과 같은 것을 지원합니까?

@ bd-arc주의, 이것이 react-native-snap-carousel 클라이언트에 영향을 미칠 것이라고 확신합니다.
https://github.com/facebook/react-native/issues/21070

@PublicParadise 헤드 업에 감사드립니다!

FlatList 놀랍게도 멈추지 않습니다 ... InteractionManager 가 어딘가에서 실행 중일 수 있으므로 구성 요소 논리의 실행을 연기합니다.

확실히 FlatList 제거 할 때입니다 :-)

안녕하세요, 지금까지이 분야에 대한 업데이트가 있습니까?

실제로 FlatList 에는 정말 훌륭한 목록 구성 요소가되기 위해 필요한 것이 있습니다.
빠진 것은 UITableView 가 iOS에서 가지고있는 "예상 행 높이"개념입니다.
따라서 "해커 리와 트릭을 수행하기 위해 비동기 적으로 레이아웃해야하는 행 수"에 대한 속성이 필요하지 않습니다.

내가 말했듯이 estimatedRowHeight 있으면됩니다 (아마도 행당 다른 추정치를 허용하는 콜백이 있지만 여전히 추정치입니다!).

• 스크롤 뷰의 콘텐츠 크기를 계산하는 데 사용됩니다.
• 오프셋으로 스크롤하면 해당 오프셋으로 직접 스크롤됩니다.
• 행을 렌더링 할 때마다-배치 된 후 크기를 캐시합니다.
• 캐시 된 크기 + 예상 행 높이를 사용하여 항목에 대한 오프셋 또는 오프셋에 대한 항목을 빠르게 계산합니다.
• 또한 매우 높은 항목 인덱스 이전의 모든 행에 대한 추정 / 캐시를 고려할 수 없으며, 일종의 창 크기를 사용하고 나머지는 평균 추정값을 사용합니다.

따라서 콘텐츠 크기는 동적으로 변경되지만 마지막 항목이나 다른 인덱스로 스크롤 할 수 있고 결함없이 도달 할 수 있기 때문에 아무도 신경 쓰거나 느끼지 않을 것입니다. 스크롤하는 동안 누락 된 항목.

안녕하세요 @naqvitalha ,이 구성 요소에 대해 플랫리스트를 RLV로 마이그레이션 할 지점이나 PR이 있습니까? 나에게 매우 유용 할 것입니다. 감사.

내 구성 요소를 사용해 주셔서 감사합니다.

거의 모든 장면에 대해 다음과 같이해야합니다.

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

그리고 Carousel의 모든 상위 항목에 { flex : 1 } 스타일이 포함되어 있는지 확인합니다.

이 팁에주의하십시오.

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

LargeList의 항목이 LargeList의 크기에 맞도록하려면 LargeList가 제대로 작동하지 않습니다. LargeList 크기가 부모 또는 제한된 높이에서 상속되었는지 확인해야합니다.

중국어를 이해한다면 저의 풀 영어를 용서하십시오. 이 문제 확인

FlatList 구성 요소는 너무 버그가 많습니다.

이러한 플러그인은 흥미로운 대체물이 될 수 있습니다.

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

잘했다