Блог

Возможно ли реализовать плоский список с помощью react native web, в котором вы добавляете данные, сохраняя видимое содержимое?

Прямо сейчас он переходит в начало плоского списка, когда вы добавляете что-либо. Я использую onContentSizeChange принудительное перемещение позиции прокрутки после обновления, но это ужасно, так как иногда перед обновлением возникает огромная задержка. Проверьте этот пробел, чтобы понять, что я имею в виду: https://snack.expo.io/@divone/prepend-data-to-flatlist-on-web

Был ли кто-нибудь успешным в реализации плоского списка, подобного чату, с помощью React Native Web? Если да, то как этого добиться?

РЕДАКТИРОВАТЬ: я обнаружил, что в react native Web видимость содержимого автоматически сохраняется при добавлении данных ТОГДА И ТОЛЬКО ТОГДА, КОГДА полоса прокрутки не находится в верхней части экрана. (перекус)

Итак, мой вопрос все еще остается в силе… как добавить данные и сохранить видимость, даже если полоса прокрутки прокручивается до упора?

Вы можете инвертировать свой плоский список, а затем также изменить представление данных. Я имею в виду, что когда вы меняете направление плоского списка, вы добавляете данные в его конец, и тогда никакого перехода не происходит. Я изменяю ваш общий код и вставляю его ниже, чтобы было понятно, что я сказал, надеюсь, это поможет:

 import * as React from 'react';
import { Text, View, Button, FlatList } from 'react-native';

let lastContentHeight = 0;
let lastY = 0;

export default function App() {
const [data, setdata] = React.useState([]);

const flatlist = React.useRef();

const addData = React.useCallback(() => {
    const first =  data.length ? data[data.length-1].key : 1;
    const newArray = [];
    for (let i = first ; i <first  15; i  ) {
        newArray.push({ key: i });
    }
    setdata([ ...data,...newArray]);
}, [data]);

React.useEffect(() => {
    addData();
}, []);

// const onContentSizeChange = (contentWidth, contentHeight) => {
//  const delta = contentHeight - lastContentHeight;
//  const newY = lastY   delta;
//  flatlist.current.scrollToOffset({ animated: false, offset: newY });
//  lastY = newY;
//  lastContentHeight = contentHeight;
// };

const onScroll = ({
    nativeEvent: {
        contentOffset: { y },
    },
}) => {
    lastY = y;
};

return (
    <View style={{ height: 600 }}>
        <Button onPress={addData} title="Prepend data" />
        <FlatList
  inverted
            ref={flatlist}
            data={data}
            renderItem={({ item }) => <Text style={{ padding: 80 }}>{item.key}</Text>}
            // onContentSizeChange={onContentSizeChange}
            onScroll={onScroll}
        />
    </View>
);
  

}