javascript - 如何在React Native FlatList中按 'something'排序？

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}) {
  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' },
  ]);

  function renderItem(item) {
    return (
      <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>
    );
  }

  function sortData() {
    let sortedArray = [];

    // 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
    reviews.forEach(review => (
      review.first
        ? sortedArray = [review, ...sortedArray]
        : sortedArray.push(review)
    ));

    return sortedArray;
  }

 return (
  <View style={styles.container}>
    <FlatList
      data={sortData()}
      renderItem={({ item }) => renderItem(item)}
    />
  </View>
 );
}

为了方便起见，我将用于渲染项目的代码移至单独的函数