我在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] 删除。
我来说两句