Przewiń do końca FlatList po wyświetleniu klawiatury

Question

Mam FlatList wewnątrz widoku KeyboardAvoidingView. Kiedy wyświetla się klawiatura, chciałbym przewinąć do końca FlatList.

Słucham zdarzenia "keyboardDidShow", które zostanie wyrzucone, ale może zostać wyrzucone zbyt wcześnie, ponieważ FlatList nie jest przewijany do końca po wywołaniu scrollToEnd.

Zajrzałem do zdarzenia OnLayout z KeyboardAvoidingView, jednak samo ustawienie zdarzenia onLayout w celu wyzwolenia funkcji wydaje się uniemożliwiać KeyboardAvoidingView zmianę jego rozmiaru po wyświetleniu klawiatury.

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

Kod:

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

Jak stwierdzono w ponad comment, getItemLayout powinno rozwiązać problem.

Według Reactive FlatList documentation:

getItemLayout jest opcjonalnym optymalizacje, które pozwalają nam przejść pomiar zawartości dynamicznej, jeśli znasz wysokość przedmiotów a priori. getItemLayout jest najbardziej wydajny i jest łatwy w obsłudze, jeśli mają stałe pozycje wysokości, na przykład:

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

Jeśli używasz ItemSeparatorComponent, nie zapomnij uwzględnić wysokość lub szerokość separatora przy obliczaniu otrzymaną offsetowy.

Answer 2

Proszę to sprawdzić link. Mam nadzieję, że to zadziała

Answer 3

tak naprawdę, jeśli zawsze chcesz przewinąć do końca, oznacza, że ​​zawsze chcesz zobaczyć najnowszą wiadomość, czy mam rację?

następnie użyć nowej wersji systemu reagowania natywnego. i dodaj odwrócony, aby zmienić odwróconą listę płaską.

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

następnie zmienić twoje this.state.messages góry nogami. wówczas ostatni komunikat będzie zawsze pokazany na dole flatlist

W moim przypadku nie trzeba używać KeyboardAvoidingView

Answer 4

Robię składnik czat i chcę o tych samych rzeczy. Czy to tak:

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

Klawiatura pojawia się uruchamia układ, więc to jest naprawione. Nowe wiadomości na czacie przychodzące do zmian zawartości wyzwalacza, więc również przewijane są na dół (to jest to, czego chciałem w oknie czatu).