FlatListコンポーネントのライフサイクルメソッドScrollToIndex ScrollToEndなど

Question

新しいFlatList componentを使用しており、componentDidMountなどのライフサイクルメソッド内でScrollToIndex（またはScrollToEnd）を使用したいと考えています。

私は100個のアイテムを並べていますが、最初のアイテムではなく最初からレンダリングを開始したいと考えています。 50番目の項目で言いましょう。 FlatListは一度に一つのアイテムを表示している場合は、ここで説明するように、いくつかのハックで、必要に応じて、それが働いています：https://github.com/facebook/react-native/issues/13202

componentDidMount() { 
    let wait = new Promise((resolve) => setTimeout(resolve, 500)); // Smaller number should work 
    wait.then(() => { 
    this.refs.flatlist.scrollToIndex({index: 4, animated: true}); 
    }); 
} 

このスニペットはcomponentDidMountの呼び出しのscrollToIndex実行後数ミリ秒になります。

しかし、私がFlatListを使用するとき、ビューが3x3グリッドを含む場合、私は単にそれを実行させることができません。 scrollToIndexを使用してインデックスが指定された小道具initialNumToRenderの外にある場合、私は理解できないエラーscrollIndex out of range $IDしか得られません。提供されるデータ配列は、例えば100項目すべてを有する。私がscrollToEndの私達を作るとき、それは終わりでなく間のどこかで停止します。私にとっては何らかのバグのように見えますが、最初のレンダリング後に$ Xアイテムにスクロールする方法は他には分かりません。手伝って頂けますか？

私はあらゆる種類のヘルプやコメントに感謝します。

iOSとAndroid（エミュレータとデバイス）でReact-Native v0.43.0とv0.44.0を試しましたが、それは常に同じです。 VirtualizedList.jsを見ると

Answer 1

、scrollIndex out of range $ID警告は、これらの条件下で発生します。

scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) { 
    const {data, horizontal, getItemCount} = this.props; 
    const {animated, index, viewPosition} = params; 
    if (!(index >= 0 && index < getItemCount(data))) { 
     console.warn('scrollToIndex out of range ' + index); 
     return; 
    } .... 

おそらく、あなたのgetItemCountの小道具は、あなたの与えられたデータから正しい数を取得していることを確認。デフォルトでは、propはdata.lengthを使用していますので、まだ作成していない場合は独自の値を指定する必要があります。

Answer 2

フラットリストにgetItemLayout小道具を設定していますか？それはscrollToIndex反応ネイティブコードに言っていること

チェック - あなたのアイテムはしかし、設定された高さを持っている場合https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

これは実際に動作します。まだ高さの可変なアイテムには適切な解決策がないようです。私はこれをinitialNumToRender={indexToScrollTo + 1}に設定し、scrollToIndexの代わりにscrollToOffset（スクロールしたい項目のオフセットにオフセットを設定する）を使用して、可変高さで動作させることしかできませんでした。長いリストを持っているか、アイテムに複雑なレンダリングがある場合、これは明白なパフォーマンス上の問題を持ち、実際には理想的ではありません。