react-native - 显示键盘后滚动到 FlatList 的末尾

Question

我在 KeyboardAvoidingView 中有一个 FlatList。当显示键盘时，我想滚动到 FlatList 的末尾。

我正在监听确实被触发的“keyboardDidShow”事件，但它可能被触发过早，因为在调用 scrollToEnd 后 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

实际上，如果你总是想滚动到最后，意味着你总是想看到最新的消息，对吗？

然后使用新版本的 react-native。并添加 倒置 改变平面列表的倒置。

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

然后重新排列您的 this.state.messages 上下翻转。那么您的最新消息将始终显示在 flatlist 的底部

就我而言，我不需要使用 KeyboardAvoidingView