5

是否可以使用react native web实现 Flatlist ，您可以在其中添加数据同时保持可见内容？

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

有人成功地使用 React Native Web 实现了类似聊天的平面列表吗？如果是，如何实现？

编辑：我发现在 react native web 上，当您添加数据时，如果且仅当滚动条不在屏幕顶部时，内容可见性会自动保持。（小吃）

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

4

1 回答 1

0

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

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

}

于 2020-11-13T05:38:09.737 回答