首頁猿問如何在 React Native...

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

JavaScript

ABOUTYOU 2023-07-14 14:55:27

這是我在 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' }

查看完整描述

3 回答

GCT1015

TA貢獻1827條經驗獲得超4個贊

我認為最好的方法是根據需要對數據進行排序，然后使用 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)}>

<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 (

<FlatList

data={sortData()}

renderItem={({ item }) => renderItem(item)}

</View>

);

}

為了方便起見，我移動了將項目渲染到單獨函數的代碼

反對回復 2023-07-14

慕姐4208626

TA貢獻1852條經驗獲得超7個贊

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

您可以使用

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

這將對您的評論數組進行排序。

反對回復 2023-07-14

江戶川亂折騰

TA貢獻1851條經驗獲得超5個贊

你可以做的是

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

反對回復 2023-07-14

3 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答

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