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

安德鲁·亚瑟(Andrew Arthur):

我在KeyboardAvoidingView内部有一个FlatList。显示键盘时,我想滚动到FlatList的末尾。

我正在侦听确实触发的'keyboardDidShow'事件,但是由于FlatList在调用scrollToEnd之后没有滚动到末尾,因此可能触发得太早了。

我已经研究了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>
    );
  }
}
黑木京

实际上,如果您始终想滚动到末尾,那意味着您始终想看到最新消息,对吗?

然后使用新版本的react-native。并添加倒置即可更改平面列表的上下颠倒方向。

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

然后上下颠倒地重新排列this.state.messages那么您的最新消息将始终显示在单位列表的底部

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章