将数据添加到 React Native Web 上的 FlatList，同时保持可见的内容

Question

是否可以使用 React Native Web实现 Flatlist，在其中预先添加数据，同时保持可见内容？

现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我使用onContentSizeChange在更新后强制移动滚动位置，但体验很糟糕，因为有时更新前会有很大的延迟。检查这个松弛看看我的意思：https : //snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有没有人成功地使用 React Native Web 实现类似 Chat 的 Flatlist？如果是，如何实现？

---

编辑：我发现在 react native web 上，当您预先添加数据IF AND ONLY IF滚动条不在屏幕顶部时，内容可见性会自动保持。（点心）

所以我的问题仍然存在......即使滚动条一直向上滚动，如何预先添加数据并保持可见性？

Answer 1

您可以反转您的平面列表，然后也反转您的数据视角。我的意思是，当您反转平面列表的方向时，您会在其末尾添加数据，然后不会发生跳转。我修改了您的共享代码并将其粘贴在下面，以清楚我所说的内容希望它有所帮助：

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>
);

}