我的聊天应用程序中有一个倒置的垂直
FlatList
,它在底部显示最新消息,在顶部显示最旧的消息(与所有其他聊天应用程序一样)FlatList
自动跳转到列表的底部!这是我的
FlatList
:
<FlatList
inverted
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
这是将最新消息添加到列表的代码
const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });
您的案例看起来很简单,但您要在顶部添加新消息,然后使用
inverted
标志将其反转到底部最后一个位置
可以删除
inverted
标志并最后简单地添加新项目 const data = [...this.state.data, ...newMessages];
<FlatList
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
const data = [...this.state.data, ...newMessages];
this.setState({ data });
我希望这会起作用
将其放入视图中
<FlatList
data={this.state.data}
ref={ref => {
this.flatListRef = ref;
}}
initialScrollIndex={0}
keyExtractor={item => item.id}
extraData={this.state.refresh}
renderItem={({item, index}) => {
// animation={animation}
return (
<ListItem
inAnimation={inAnimation}
outAnimation={outAnimation}
duration={duration}
easing={easing}
isDeleted={item._isDeleted}
id={item.id}
item={item}
/>
);
}}
`/>`
在函数中运行它
this.flatListRef.scrollToIndex({
animated: true,
index: nextProps.indexScroll})
});
您可以同时使用 onViewableItemsChanged 和scrollToIndex 来保持 viewableItems 与之前的状态保持一致。
const flatListRef = React.useRef();
const startIndexRef = React.useRef(0);
const handleListChange = () => {
// ...otherlogic
if (haseAddedToStart)
flatListRef.current?.scrollToIndex({
index: startIndexRef.current + 1,
animated: false,
});
};
const onViewableItemsChanged = React.useCallback(({ viewableItems }) => {
startIndexRef.current = viewableItems[0].index;
}, []);
要添加到平面列表的额外道具是 ref 和 onViewableItemsChanged
<FlatList
ref={flatListRef}
onViewableItemsChanged={onViewableItemsChanged}
// ...otherProps
/>
onViewableItemsChanged 应该与 useCallback 一起使用,因为更改列表会导致错误。
如果第一个项目是半可见的,它将滚动到小于项目高度。
通过 onScrollEndDrag 和 onMomentumScrollEnd 应该可以获得更准确的结果,但需要计算项目高度。
您应该使用解决方法来实现此目的。如果您检查 FlatList(它扩展了 ScrollView 的属性)的文档,您会发现您需要做的就是将scrollEnabled 属性设置为 false 以禁用滚动。您选择如何以及在何处执行此操作将取决于您,因为您并没有真正发布大量代码。处理这个问题的一个简单方法是使用状态:
<FlatList
...
scrollEnabled={this.state.scrollEnabled}
/>
在您的情况下,您可以在加载新数据时更改状态,并在渲染时将其更改回来。
Github 上有一个关于此案例的开放 issue。