キーボードを表示した後、FlatListの最後までスクロールします

Question

私はKeyboardAvoidingViewの中にFlatListを持っています。キーボードが表示されたら、FlatListの最後までスクロールしたいと思います。

私は 'keyboardDidShow'イベントが発生するのを待ち受けていますが、scrollListEndを呼び出した後にFlatListが最後までスクロールされないため、早すぎることがあります。

KeyboardAvoidingViewのonLayoutイベントを調べましたが、関数をトリガするonLayoutイベントを設定するだけで、キーボードが表示されているときにKeyboardAvoidingViewのサイズが調整されなくなりました。

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}} onLayout={this._scrollEnd}> 

コード：

import React from 'react'; 
import {Image, Linking, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Button, Alert, FlatList, TextInput, KeyboardAvoidingView, Keyboard} from 'react-native'; 
import { MonoText } from '../components/StyledText'; 

export default class HomeScreen extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     messages: getMessages() 
    }; 

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._scrollEnd); 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidHide', this._scrollEnd); 
    } 

    _scrollEnd = (evt) => { 
    this.refs.flatList1.scrollToEnd(); 
    } 

    render() { 
    return (
     <KeyboardAvoidingView behavior='padding' style={{ flex: 1}} > 
     <FlatList 
      style={{ flex:1}} 
      ref="flatList1" 
      data={this.state.messages} 
      renderItem={({ item }) => <Text>{item.text}</Text>} 
     /> 
     </KeyboardAvoidingView> 
    ); 
    } 
} 

Answer 1

comment上で述べたように、getItemLayoutはあなたの問題を解決する必要があります。 Reactive FlatList documentationによると

：

getItemLayoutあなたはアイテムの高さを先験的に知っていれば、私たちは、動的コンテンツの測定をスキップさせ、オプションの最適化です。 getItemLayoutは、最も効率的であり、そしてあなたは、たとえば、高さの項目を修正した場合は使用するように簡単です：

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

あなたがItemSeparatorComponentを使用している場合は、結果を計算する際に、セパレータの高さや幅を組み込むことを忘れないでくださいオフセット。

Answer 2

これをチェックしてください。linkこれがうまくいくことを願っています

Answer 3

実際に最後までスクロールしたい場合は、常に最新のメッセージを見たいと思っていますか？

次に、新しいバージョンのreact-nativeを使用します。 を反転してに追加すると、フラットリストの上下が逆になります。

<FlatList 
     inverted 
     style={{ flex:1}} 
     ref="flatList1" 
     data={this.state.messages} 
     renderItem={({ item }) => <Text>{item.text}</Text>} 
    /> 

、あなたのthis.state.messages逆さまに並べ替えます。その後、最新のメッセージはいつも私のケースではflatlist

の下に表示されます、私はチャットコンポーネントを作ってるんだKeyboardAvoidingView

Answer 4

を使用する必要はありませんし、私は同じ事をします。このようにしましたか：

<FlatList 
    ref={ref => this.flatList = ref} 
    onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})} 
    onLayout={() => this.flatList.scrollToEnd({animated: true})} 
    ... 
/> 

キーボードのポップアップがレイアウトをトリガーするので、修正されました。新しいチャットメッセージが到着してトリガーコンテンツが変化するので、チャットウィンドウの下にスクロールします（