如何在 React Native FlatList 中按“某物”排序？

Question

这是我在 Home.js 文件中的完整代码

export default function Home({navigation}) {

const [reviews, setReviews] = useState([

    { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ',  'CD ', 'ESP '], key: '1' },

    { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' },

    { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' },

    { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' },

    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' },

    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' },

    { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' },

    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' },

    

  ]);

 return (

<View style={styles.container}>

<FlatList data={reviews} renderItem={({ item }) => (

    <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>

        

        <View style={styles.content}>

            <Image

            style={styles.image}

            source={{

            uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg',

            }}

            />

            <Text style={styles.headertext}>{item.title }</Text>

            <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text>

        </View>

    </TouchableOpacity>

  )} />

</View>

); }

所以我想把第一个放在 FlatList 上，检查谁在数组“第一个”中，所以在代码中是第四个。我怎样才能做到这一点？

我希望这是 FlatList 上的第一个

{ title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' }

Answer 1

我认为最好的方法是根据需要对数据进行排序，然后使用 FlatList 进行渲染。排序逻辑可能是您需要的方式，这意味着如果您愿意，您可以自由地“按‘任何’排序”。根据您提供的数据集和信息，据我了解，业务规则是将带标志的项目显示fisrt在第一位。所以，排序可能是这样的：export default function Home({navigation}) {&nbsp; const [reviews, setReviews] = useState([&nbsp; &nbsp; { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ',&nbsp; 'CD ', 'ESP '], key: '1' },&nbsp; &nbsp; { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' },&nbsp; &nbsp; { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' },&nbsp; &nbsp; { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' },&nbsp; &nbsp; { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' },&nbsp; &nbsp; { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' },&nbsp; &nbsp; { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' },&nbsp; &nbsp; { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' },&nbsp; ]);&nbsp; function renderItem(item) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.content}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.image}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.headertext}>{item.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; );&nbsp; }&nbsp; function sortData() {&nbsp; &nbsp; let sortedArray = [];&nbsp; &nbsp; // If the item contains "first" property, it will be placed at the beginning of the sortedArray, else it will be at the end of it&nbsp; &nbsp; reviews.forEach(review => (&nbsp; &nbsp; &nbsp; review.first&nbsp; &nbsp; &nbsp; &nbsp; ? sortedArray = [review, ...sortedArray]&nbsp; &nbsp; &nbsp; &nbsp; : sortedArray.push(review)&nbsp; &nbsp; ));&nbsp; &nbsp; return sortedArray;&nbsp; }&nbsp;return (&nbsp; <View style={styles.container}>&nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; data={sortData()}&nbsp; &nbsp; &nbsp; renderItem={({ item }) => renderItem(item)}&nbsp; &nbsp; />&nbsp; </View>&nbsp;);}为了方便起见，我移动了将项目渲染到单独函数的代码

Answer 2

使用 array.sort 并提供比较功能您可以使用reviews.sort((a, b) => a.rating - b.rating)这将对您的评论数组进行排序。

Answer 3

你可以做的是var reviews1 = reviews.filter(function (el) {&nbsp; return el["first"];});var reviews2 = reviews.filter(function (el) {&nbsp; return el["first"] === undefined;});const reviewsFinalArray = reviews1.concat(reviews2); // Your result