Я создаю приложение чата с React Native, используя Expo, и я использую Flatlist как дочерний элемент KeyboardAvoidingView для визуализации списка сообщений, проблема в том, что я хочу прокрутить страницу вниз при срабатывании клавиатуры
Поэтому я использовал метод Flatlist (scrollToEnd) с ловушкой useRef, и мой код выглядит следующим образом:
const ChatBody = ({ messages }) => {
const listRef = useRef(null);
useEffect(() => {
Keyboard.addListener("keyboardWillShow", () => {
setTimeout(() => listRef.current.scrollToEnd({ animated: true }), 100);
});
return () => Keyboard.removeListener("keyboardWillShow");
}, []);
return (
<FlatList
ref={listRef}
keyboardDismissMode="on-drag"
data={messages}
keyExtractor={(item) => item.id || String(Math.random())}
renderItem={({ item }) => <Message {...item} />}
/>
}
Код отлично работает при первом рендеринге, но когда я покидаю экран, возвращаюсь снова и запускаю На клавиатуре я получаю эту ошибку:
TypeError : null in not an object (evaluating 'listRef.current.scrollToEnd')
* Причина, по которой я добавил setTimout, заключалась в том, что scrollToEnd по какой-то причине не работает, когда вызывается событие клавиатуры. добавление setTimeout решило эту проблему.
Дерево компонентов выглядит примерно так:
StackNavigatorScreen => KeyboardAvoidingView => FlatList