在React Native中,我有一个静态的书本数组,可以将其映射并像这样堆叠成行输出:
return books.map((book, i) => { return( <View style={styles.book} key={i}> <Text style={styles.book}>{book.title}</Text> </View> ); });
每本书的底部边框都有styles.book:
styles.book
book: { borderBottomWidth: 1, borderBottomColor: '#000000' }
我需要列表中的最后一本书没有底线,所以我需要将其应用于borderBottomWidth: 0我认为吗?在React Native中,我如何才能获得列表中的最后一本书没有该底部边框?(在普通CSS中,我们将使用上一个孩子)
borderBottomWidth: 0
您可以使用一些逻辑来实现:
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。
i
length - 1