ReactNative ListView 데이터로드 후 초기 스크롤 위치 설정

Question

날짜가 포함 된 섹션 제목이있는 이벤트 섹션이 있습니다. 나는 특정 날짜로 점프 할 수있을뿐만 아니라 초기 스크롤 위치를 미래의 첫 번째 날짜로 설정해야합니다.

특정 날짜로 이동하려면 상태에서 y 위치를 저장해 보았습니다. renderSectionHeader가 (때문에 게으른 렌더링에) 목록을 아래로있는 요소에 호출되지 않습니다으로하지만

renderSectionHeader= (sectionData, sectionID) => (
     <View 
     onLayout={(event) => { 
      const { y } = event.nativeEvent.layout; 
      const sectionPosition = { [sectionID]: y }; 
      const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition); 
      this.setState({ sectionPositions }); 
     }} 
     ... 

나는이 방법을 문제로 달렸다.

나는 수학적으로 위치를 계산하려고 시도했지만 다음으로 각 섹션 렌더링이 주어진 날짜에 더 가깝게 이동하는 동안 화면에 표시됩니다.

내가 원하는 것을 얻을 수있는 방법이 있습니까?

관련 React Native ListView: How to scroll to a particular row

https://github.com/facebook/react-native/issues/499

UPDATE 내 응용 프로그램에서

나는 모든 행이 동일한 높이를 알고있다.

setScroll이 아닌 contentOffset={{ y: offsetY }}을 사용하면 작동하도록 주어진 항목까지 모든 항목을 렌더링해야하기 때문에 작동하지 않습니다.

사용하면 initialListSize={99999999}이 작동하지만 페이지가 매우 느려지므로 사용하지 말라고 경고했습니다.

업데이트 2

는 데이터 소스 내 초기 콘텐츠를 제공하고 이전에 현재 화면의 요소 후 별도의 항목을 추가 데이터를 업데이트 할 수 있습니까?

또는 내가 필요한 것을 찾지 못한 라이브러리가 있습니까?

Answer 1

현재 React-Native repo의 실험 폴더에있는 FlatList가 곧 해결할 수 있습니다.

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

더 나은 ListView에 - FlatList 요약 : 우리가 정말 더 나은 목록보기 필요 - 그래서 여기있다! ListView 기존의

홈페이지 변경 :

• 항목은 "가상화"있는 메모리를 제한하는 - 즉, 렌더링 창 이외의 항목은 마운트 해제하고 자신의 메모리가 회수됩니다. 이 은 항목이 렌더 창 밖으로 스크롤 될 때 인스턴스 상태가 유지되지 않음을 의미합니다.
• 아니요 DataSource - 모양이 data 작은 꾸러미 Array<any>입니다.기본적으로, 이들은 형상이 {key: string} 일 것으로 예상되지만, 커스텀 rowExtractor 기능은 상이한 형상을 위해 제공 될 수 있으며, 과 같이 제공 될 수있다. 그래프 데이터는 id을 key에 매핑하려는 데이터입니다. 의 기본이되는 VirtualizedList은 훨씬 유연합니다.
• 팬시 scrollTo 기능 : scrollToOffset 외에도 scrollToEnd, scrollToIndex 및 scrollToItem 기능.
• 새로 고침을 지원하는 풀 내장 - onRefresh 및 refreshing 소품을 설정합니다.
• 렌더링 된 콘텐츠가 부족한 경우를 제외하고는 모든 상호 작용/애니메이션 완료 후 추가 행 렌더링이 우선 순위가 낮습니다. 이렇게하면 앱이 반응을 느낄 수 있습니다.
• 부품 소품이 렌더링 기능을 대체합니다. ItemComponent: ReactClass<{item: Item, index: number}>는 renderRow: (...) => React.Element<*>
• 자동 onLayout를 사용하여 동적 항목을 지원하거나 getItemLayout가 반환 한 향상을 위해 제공 부드러운 scrollToIndex 및 스크롤 막대 동작 할 수있다 대체합니다.
• 가시성 콜백은 더 강력한 가시성 콜백으로 대체되었으며 Android 및 iOS에서는 수직 및 수평 모드 ( )에서 작동하지만 다른 플랫폼에서도 사용할 수 있습니다. 추가 전원은 viewablePercentThreshold에서 제공되며 클라이언트는 을 볼 수있는 것으로 간주해야하는지 여부를 결정할 수 있습니다.

데모 :