React Native - CSS :last-child 没有边框? [英] React Native - CSS :last-child without a border?

问题描述

在 React Native 中，我有一个静态书籍数组，我将这些书籍映射并以堆叠的行输出，如下所示:

In React Native, I have a static array of books that I map over and output in stacked rows like this:

return books.map((book, i) => {
  return(
    <View style={styles.book} key={i}>
      <Text style={styles.book}>{book.title}</Text>
    </View>
  );
});

我也通过 styles.book 在每本书上有一个底部边框:

I also have a bottom border on each book via styles.book:

book: {
  borderBottomWidth: 1,
  borderBottomColor: '#000000'
}

我需要列表中的最后一本书没有底部边框，所以我认为我需要将 borderBottomWidth: 0 应用于它?在 React Native 中，如何让列表中的最后一本书没有底部边框?(在普通的 css 中，我们会使用 last-child)

I need the last book in the list to NOT have a bottom border, so I'll need to apply borderBottomWidth: 0 to it I think? In React Native, how can I get the last book in the list to not have that bottom border? (In normal css we'd use last-child)

推荐答案

你可以使用一些逻辑来实现:

You could achieve this using some logic:

return books.map((book, i) => {
  return(
    <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>
      <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>{book.title}</Text>
    </View>
  );
});

这样做是检查迭代器i是否等于books数组的length - 1.

What this does is check if i, the iterator, is equal to the books array's length - 1.

这篇关于React Native - CSS :last-child 没有边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！