javascript - 重新排列 Flatlist 项目而不重新加载 React Native
问题描述
我正在寻找重新排列平面列表项目而不刷新 React Native 中的平面列表/重新加载,就像聊天应用程序一样,当您收到来自列表中某人的新消息时,此人将是列表中的第一个。
我搜索了很多,我能找到的只是添加、删除、拖放排序。我正在寻找它在用户收到一条消息时自动发生,该消息将是列表中的第一个。
我现在拥有的所有代码都是带有虚拟数据的平面列表
现在可以说我希望 id 3 成为数字 1 而无需刷新/重新加载平面列表,我知道我应该使用动画,但我在动画 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,
},
});
解决方案
推荐阅读
- jquery - 使用 QUnit 测试表单是否提交了两次
- sql - 如何自动杀死活动会话?
- php - 将数组与祖先元素混合
- c++ - 理解 C 链接器错误:多重定义
- angular - 如何在 ionic 4 和 angular 7 中正确导入管道?
- elasticsearch - 过期滚动上下文的 Elasticsearch 回复
- tensorflow - tx2 protobuf 上的张量流
- azure-devops - 在 Azure DevOps 构建定义中下载最新版本的构建工件时未找到最新构建
- r - R:从基于连续变量的分类变量创建一个新的分类变量
- git - 如何将 TFS 拉取请求中的 Jenkins 作业与合并的分支进行排队