第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

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>); }所以我想把第一個(gè)放在 FlatList 上,檢查誰(shuí)在數(shù)組“第一個(gè)”中,所以在代碼中是第四個(gè)。我怎樣才能做到這一點(diǎn)?我希望這是 FlatList 上的第一個(gè){ title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' }
查看完整描述

3 回答

?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

我認(rèn)為最好的方法是根據(jù)需要對(duì)數(shù)據(jù)進(jìn)行排序,然后使用 FlatList 進(jìn)行渲染。


排序邏輯可能是您需要的方式,這意味著如果您愿意,您可以自由地“按‘任何’排序”。


根據(jù)您提供的數(shù)據(jù)集和信息,據(jù)我了解,業(yè)務(wù)規(guī)則是將帶標(biāo)志的項(xiàng)目顯示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>

 );

}

為了方便起見(jiàn),我移動(dòng)了將項(xiàng)目渲染到單獨(dú)函數(shù)的代碼


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
慕姐4208626

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

您可以使用

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

這將對(duì)您的評(píng)論數(shù)組進(jìn)行排序。


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

你可以做的是


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


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 3 回答
  • 0 關(guān)注
  • 219 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)