반응 네이티브 플랫리스트 풀업 로딩 onEndReached가 자주 발생하는 문제를 해결하는 방법

이번에는 react-native flatlist 풀업 로딩 onEndReached가 자주 발생하는 문제를 해결하는 방법에 대해 알아봅니다. 주의사항은 무엇인가요? 사례를 살펴보겠습니다.

문제

플랫리스트 재사용 컴포넌트 작성 시 상위 컴포넌트가 호출 시 가변 높이를 갖는 컴포넌트인 경우 해당 컴포넌트가 표시되지 않습니다.

상위 컴포넌트 스타일이 {flex: 1}인 경우 드롭다운 메소드가 자주 트리거되거나 비정상적인 트리거 문제(여기서 문제는 목록의 6번째 항목이 맨 아래에 있을 때 느린 풀업이 flatlist의 onEndReached 리스너를 여러 번 트리거한다는 것입니다)

이유

{flex: 1}이 적합하지 않기 때문인 것으로 추측됩니다. 동적 높이 구성 요소의 상위 구성 요소 스타일을 사용하면 높이를 잘못 판단하여 onEndReached가 여러 번 비정상적으로 트리거될 수 있습니다.

해결 방법

목록 위의 필수 구성 요소를 header속성으로 만들 수 있습니다. 들어오는 구성 요소는 플랫리스트의 헤더 구성 요소로 사용되므로 캡슐화된 구성 요소를 직접 호출할 수 있습니다.

부모 요소의 스타일을 {height: '100%'}로 설정하여 onEndReached 리스너가 올바르게 트리거될 수도 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트기타 관련 기사를 주목하세요!

추천 도서:

JavaScript DOM 최적화

Vue의 계산된 속성

위 내용은 반응 네이티브 플랫리스트 풀업 로딩 onEndReached가 자주 발생하는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!