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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Native flexbox - 檢測行中的最后一個元素

React Native flexbox - 檢測行中的最后一個元素

忽然笑 2022-07-08 18:30:08
我有一個動態列表,其中包含使用 flex-wrap 連續呈現的文本(例如標簽)。我想在所有項目之間添加一個項目符號分隔符,每行中的最后一個除外。例如,假設我有 list ['apple', 'peach', 'orange', 'watermelon', 'pear']。根據屏幕大小,我希望它們以行和小子彈的形式呈現。蘋果?桃?橙西瓜?梨如您所見,只有一行的元素之間會有兩行和項目符號?,F在,我可以使用index它來檢查它是否是列表中的最后一個元素, arr.map((i, index) => index < arr.length-1 && <View>...</View>)但我在第一行中的最后一個元素之后得到一個項目符號蘋果 ? 桃子 ? 橙子 ?西瓜?梨這不是我想要的?,F在假設我有更長的項目名稱,并且第一行只呈現了其中兩個,我想要相同的效果,最后沒有項目符號。有人可以幫我檢測一行中的最后一個元素。這是我的代碼示例。<View style={styles.section}>    {        tags.map((tag, index) => (            <View key={tag.id} style={styles.tagItem}>                <Text style={styles.tagTitle}>{tag.title}</Text>                {index < tags.length - 1 && <Text>?</Text>}            </View>        ))    }</View>這是我的樣式對象:{    section: {        flexDirection: 'row',        flexWrap: 'wrap',    },    tagItem: {        paddingHorizontal: 5,        flexDirection: 'row',    },}
查看完整描述

3 回答

?
隔江千里

TA貢獻1906條經驗 獲得超10個贊

您可以按 y 軸上的偏移量將它們分成幾組。然后你可以檢查哪個元素離每組最右邊,然后你可以跳過那個點。



查看完整回答
反對 回復 2022-07-08
?
Qyouu

TA貢獻1786條經驗 獲得超11個贊

我的解決方案是在每個元素之前顯示分隔符并用負左邊距隱藏它們。也許它不是最優雅的,但可以肯定它不需要這么多的努力。



查看完整回答
反對 回復 2022-07-08
?
一只斗牛犬

TA貢獻1784條經驗 獲得超2個贊

你可以用這個 css 技巧做到這一點:li + li::before


.list  {

  list-style: none;

  display: flex;

}


li span {

  padding: 20px

}


li + li::before {

      content: "\02022"

}

<ul class="list">

    <li>

        <span>Apple</span>

    </li>

    <li>

        <span>Banana</span>

    </li>

    <li>

        <span>Peach</span>

    </li>

</ul>


查看完整回答
反對 回復 2022-07-08
  • 3 回答
  • 0 關注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號