问题描述
在 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 没有边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!