Вызов scrolToEnd после завершения рендеринга Flatlist
У меня есть приложение для чата, в котором для сообщений используется Flatlist. Этот FlatList должен бесконечно загружаться в обоих направлениях (чтобы видеть старые или более свежие сообщения).
Как
maintainVisibleContentPosition
prop не работает на Android, мне пришлось собрать хак, чтобы иметь возможность загружать контент без потери того, что отображается на экране.
- Если пользователь достигает верхней части чата, установите Flatlist в инвертированный -> scrollToEnd (вверху экрана) -> загружать старые сообщения
- Если пользователь доходит до нижней части чата, установите Flatlist в нормальное состояние -> scrollToEnd (внизу экрана) -> загрузить более свежие сообщения
Я использую
useEffect
чтобы определить, когда значение
inverted
был изменен на звонок
scrollToEnd
а остальное загрузите. Упрощенная версия моего кода, объясняющая, как это работает:
const [useInverted, setuseInverted] = React.useState(false);
const [reversing, setreversing] = React.useState(false);
const loadTop = React.useCallback(() => {
if (!useInverted) {
setuseInverted(true);
setreversing(true);
} else {
// Load old messages
}
}, [useInverted]);
const loadBottom = React.useCallback(() => {
if (useInverted) {
setuseInverted(false);
setreversing(true);
} else {
// Load recent messages
}
}, []);
React.useEffect(() => {
// Should be called after FlatList rerendered completely
if(reversing){
flatlist.current.scrollToEnd({ animated: false }); // <--- THIS doesn't work. List stays at start
if (useInverted) {
loadTop();
}else{
loadBottom();
}
}
}, [useInverted, loadBottom, loadTop ]);
return (
<FlatList
key={string(useInverted)} // Changing the key of the flatlist otherwise it doesn't update
inverted={useInverted}
// ...other props + logic to call loadTop and loadBottom
/>
)
Моя проблема в том, что useEffect вызывается слишком рано и
scrollToEnd
ничего не делает. Это работает, только если я использую setTimeout() для вызова
scrollToEnd
после произвольной задержки.
Есть ли способ определить, когда FlatList выполняет повторный рендеринг, и можно ли вызвать
scrollToEnd
?