Вызов 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?

0 ответов

Другие вопросы по тегам