React Native：基于favorite布尔值对FlatList实现收藏项置顶排序

你可以通过对数据源data进行排序，让favorite为true的项排在最前面，再将排序后的数组传给FlatList即可实现需求。

核心实现逻辑 #

利用数组的sort()方法，基于favorite字段的值调整顺序：

• 布尔值在JavaScript中会被隐式转换为数值：true对应1，false对应0
• 通过b.favorite - a.favorite的计算，让收藏项（true）自动排在非收藏项（false）之前
• 使用useMemo缓存排序结果，避免每次组件渲染都重复执行排序操作，优化性能

修改后的完整代码 #

import { useMemo } from 'react';
import { SafeAreaView, FlatList } from 'react-native';

// 组件内部逻辑
const sortedData = useMemo(() => {
  // 复制原数组，避免直接修改原data（防止状态异常）
  return [...data].sort((a, b) => {
    // 让收藏项排在前面
    return b.favorite - a.favorite;
  });
}, [data]); // 仅当data变化时重新排序

return (
  <SafeAreaView style={styles.app}>
    <TopBar />
    <FlatList 
      data={sortedData}
      renderItem={({item}) => <Job data={item}/>}
    />
  </SafeAreaView>
);

可选：稳定排序（保留同状态项的原顺序） #

如果需要让同状态的项保持原数组中的先后顺序，可以改用更明确的判断逻辑：

.sort((a, b) => {
  if (a.favorite === b.favorite) {
    return 0; // 状态相同，维持原顺序
  }
  // 收藏项优先排在前面
  return a.favorite ? -1 : 1;
});

内容的提问来源于stack exchange，提问作者Xacoio