ReactNative [Flatlist] scrollToOffset, 클릭 한 행의 오프셋 위치는 어떻게 계산합니까?

Question

사용자가 클릭 할 때마다 FlatList의 행을 화면 맨 위로 스크롤하고 싶습니다. 현재 scrollToIndex 메서드를 사용하여이 작업을 수행하고 있지만 문제는 화면 위쪽으로 플러시되도록 위쪽 여백 (10에서 0까지)에 애니메이션을 적용해야한다는 것입니다. 또한 사용자가 행을 확장하기 위해 행을 클릭하고 이전 행이 이미 확장 된 경우 이전 행이 축소되어 원본 scrollToIndex가 화면 상단의 일부 위치에 애니메이션을 적용하는 문제가 발생합니다.

이전 행에서 계약이 끝나면 scrollToIndex을 추가로 트리거하거나 좋은 이전 수학 값에 따라 스크롤 할 위치를 알아 내기 위해 scrollToOffset을 사용해야합니다. 클릭 할 때마다 인덱스 또는 다른 값으로 행 오프셋 위치를 파악할 수있는 방법이 있습니까?

누구에게나 도움을 주셔서 감사합니다. 대신에, 나는 아직도 방법에 추가 할 오프셋 양을 계산하기 위해 viewOffset 매개 변수를 scrollToIndex 방법을 사용하고 사용하고있어 scrollToOffset 방법을 사용하여 스크롤 위치를 알아 내려고의

Answer 1

: 확장의 차이 현재 확장 된 다른 항목 (있는 경우)의 높이를 축소하고 클릭 된 항목의 위쪽 여백을 뺍니다.

Answer 2

당신은

<FlatList 
     ref={(ref) => { this._flatList = ref; }} 
     data = {dataSourche} 
     renderItem = {( info: {item:item, index:number}) => this._renderFlatListItem(info.item, info.index)} 
     keyExtractor = {(item) => item.id} 
     decelerationRate={0} 
     snapToInterval={cardHeight} 
     snapToAlignment={"start"} //Can also be 'center' or 'end' 
     onMomentumScrollEnd = {(event) => this._onMomentumScrollEnd(event)} 
     getItemLayout = {this.getItemLayout}/> 

당신은 flatList 3 일을 알려주는 방법 getItemLayout를 정의해야합니다 그래서 당신이 FlatList 구성 요소가 있다고 가정하면

를 달성하기 위해 노력하고 무엇을 달성하기 위해 scrollToItem을 사용할 수 있습니다

1. 길이 : 카드의 케이스 높이에서
2. 오프셋 :이 목록의 상단에서 거리 현재 카드에 일반적으로 우리는
가 카드의
3. 지수는

그래서 이것은 당신이 샘플 getItemLayout 참조 할 수 있습니다되는 카드의 길이 * 지수로 설정할 수 있습니다

getItemLayout = (data, index) => (
     { length: 170, offset: 170 * index, index } 
    ); 

다음이 될 것이다 FlatList scrollToItem 호출

this._flatList.scrollToItem({ 
       animated:true, //can also be false 
       item:item, 
       viewPosition:0 //this is the first position that is currently attached to the window 
      })