小编use*_*085的帖子

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

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

我正在侦听被触发的'keyboardDidShow'事件,但是由于FlatList在调用scrollToEnd后没有滚动到最后,因此可能会过早触发.

我已经查看了KeyboardAvoidingView的onLayout事件,但只是设置onLayout事件来触发一个函数似乎阻止了KeyboardAvoidingView在显示键盘时调整它的大小.

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}} onLayout={this._scrollEnd}>
Run Code Online (Sandbox Code Playgroud)

码:

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 …
Run Code Online (Sandbox Code Playgroud)

react-native

24
推荐指数
3
解决办法
2万
查看次数

标签 统计

react-native ×1