アプリケーションロード時のFlatListの最後の項目に位置する画面

Question

現在、React Nativeでチャットアプリケーションを構築していて、メッセージリストがロードされたときに最後のメッセージに画面を配置しようとしています。このビューが組み込まれているコンポーネントはFlatListです。私はscrollToIndexとScrollToEndの機能をすぐに利用できますが、componentDidMountの内部で呼び出すとうまく動作しないようです。それに加えて、スクロール機能はそれを機能させるためのもう一つのハードルであると思われます。

また、initialScrollIndexプロパティを使用して試して、最後のインデックスをpropとして渡しました。それは実際に分割して動作するようですが、画面は最初のインデックスに戻ります。それがなぜなのか分かりません。ここでは以下の私のコードは次のとおりです。

<ScreenWrapper> 
    <FlatList 
     style={{ 
     width: WIDTH, 
     marginLeft: -20, 
     }} 
     data={messages} 
     initialScrollIndex={messages.length - 1} 
     renderItem={this.renderItem} 
     keyExtractor={item => item.id} 
     getItemLayout={this.itemLayout} 
    /> 
    </ScreenWrapper> 

Answer 1

• 使用は、参考文献を使用してcomponentDidMountでその機能は.call scrollToIndex機能をflatlist。

<ScreenWrapper> 
 
    <FlatList 
 
    ref={"flatlist} 
 
     style={{ 
 
     width: WIDTH, 
 
     marginLeft: -20, 
 
     }} 
 
     data={messages} 
 
     renderItem={this.renderItem} 
 
     keyExtractor={item => item.id} 
 
     getItemLayout={this.itemLayout} 
 
    /> 
 
    </ScreenWrapper> 
 

 
componentDidMount=()=>{ 
 
    this.refs["flatlist"].scrollToIndex(message.length-1) 
 
}