我正在寻找重新排列Flatlist项目而不刷新React Native中的Flatlist /重新加载 就像聊天应用程序一样,当您收到列表中某人的新消息时,该人将是列表中的第一人。
我已经搜索了很多东西,我所能找到的只是添加,删除,拖放排序。 我希望当用户收到一条消息时该消息自动发生,该消息将是列表中的第一条消息。
我现在拥有的所有代码都是带有伪数据的列表
现在让我说我希望id 3为数字1,而无需刷新/重新加载列表,我知道我应该使用Animation,但在RN动画方面不强。
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: '1',
title: 'First Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '3',
title: 'Third Item',
},
];
function Item({ title }) {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
export default function App() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});