如何在 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}) {

  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>

 );

}

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

Answer 2

使用 array.sort 并提供比较功能

您可以使用

reviews.sort((a, b) => a.rating - b.rating)

这将对您的评论数组进行排序。

Answer 3

你可以做的是

var reviews1 = reviews.filter(function (el) {

  return el["first"];

});

var reviews2 = reviews.filter(function (el) {

  return el["first"] === undefined;

});

const reviewsFinalArray = reviews1.concat(reviews2); // Your result