ReactNative [Flatlist] scrollToOffset、クリックした行のオフセット位置を特定するにはどうすればよいですか？

Question

フラット・リスト内の行を、ユーザーがクリックするたびに画面の上部にスクロールさせたいとします。私は現在、scrollToIndexメソッドを使用してこれを行っていますが、問題は、画面の上部にフラッシュされるように（10から0まで）上部マージンをアニメーション化する必要があることです。ユーザーが行を展開するために行をクリックし、前の行が既に展開されている場合、元のscrollToIndexが元のscrollToIndexを画面の上部からある位置にアニメーションさせる原因となる問題もあります。

私の現在の2つの選択肢は、前の行が収縮した後にscrollToIndexを追加トリガーするか、scrollToOffsetを使用して、古い古い数値の値に基づいてスクロールする場所を特定することです。クリックするたびにインデックスやその他の値で行のオフセット位置を把握する方法はありますか？

誰でも助けてくれてありがとうございます！

Answer 1

代わりのscrollToOffset方法を使用してスクロールする場所を把握しようと、私はまだscrollToIndexメソッドを使用していますし、メソッドに追加するオフセットどのくらい計算するためにviewOffsetパラメータを使用します。拡大の違いを現在展開されている他のアイテム（存在する場合）の高さを折りたたみ、クリックされたアイテムの上端を差し引きます。

Answer 2

あなたはあなたがあなたがflatList 3つの事を教えてくれる方法のgetItemLayoutを定義する必要があります。このFlatListコンポーネント

<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}/> 

があるとあなたは

を達成しようとしているものを達成するためにscrollToItemを使用することができます

1. 長さ：あなたのケースではカード
2. の高さオフセット：これは、リストの先頭からの距離でありますカードの長さ*カードのインデックス
3. インデックス

はそう、これは次はあなたになりますあなたは

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

を参照できるサンプルgetItemLayoutであるように、現在のカードには通常、私たちはそれを設定することができますフラットリスト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 
      })