Прокрутите до конца FlatList после отображения клавиатуры

У меня есть FlatList внутри KeyboardAvoidingView. Когда отображается клавиатура, я хотел бы прокрутить до конца FlatList.

Я слушаю событие "keyboardDidShow", которое запускается, но может быть запущено слишком рано, поскольку FlatList не прокручивается до конца после вызова scrollToEnd.

Я просмотрел событие onLayout KeyboardAvoidingView, но просто установка события 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>
    );
  }
}

ОТВЕТЫ

Ответ 1

на самом деле, если вы всегда хотите прокрутить до конца, значит, вы всегда хотите увидеть последнее сообщение, правильно?

затем используйте новую версию реакции-native. и добавьте перевернутый, чтобы изменить перевернутый вниз плоский список.

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

затем переформатируйте this.state.messages вверх дном. то ваше последнее сообщение всегда будет отображаться внизу списка.

В моем случае мне не нужно использовать KeyboardAvoidingView

Ответ 2

Я создаю компонент чата, и я хочу об одном и том же. Было ли это так:

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

Клавиатура всплывает, запускает макет, так что исправляется. Новые сообщения о входящих сообщениях чата, а также прокрутки вниз (это то, что я хотел для моего окна чата)

Ответ 3

Как указано выше comment, getItemLayout должна решить вашу проблему.

Согласно Реактивная документация FlatList:

getItemLayout - необязательная оптимизация, которая позволяет пропустить измерение динамического содержимого, если вы знаете высоту элементов априори. getItemLayout является наиболее эффективным и прост в использовании, если у вас есть фиксированные элементы высоты, например:

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

Если вы используете ItemSeparatorComponent, не забудьте включить высоту или ширину разделителя при вычислении результирующего смещения.

Ответ 4

Проверьте эту ссылку . Надеюсь, что это сработает.