在 React Native 中，我有一个静态书籍数组，我将其映射并以堆叠的行输出，如下所示：
return books.map((book, i) => {
return(
<View style={styles.book} key={i}>
<Text style={styles.book}>{book.title}</Text>
</View>
);
});
我在每本书上也有一个底部边框styles.book：
book: {
borderBottomWidth: 1,
borderBottomColor: '#000000'
}
我需要列表中的最后一本书没有底部边框，所以borderBottomWidth: 0我认为我需要申请它？在 React Native 中，如何让列表中的最后一本书没有底部边框？（在普通的 css 中，我们会使用 last-child）
您可以使用一些逻辑来实现这一点：
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迭代器是否等于书籍数组的length - 1。
您可以尝试支持的扩展样式表:last-child：
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
book: {
borderBottomWidth: 1,
borderBottomColor: '#000000'
},
'book:last-child': {
borderBottomWidth: 0
}
});
return books.map((book, i) => {
const style = EStyleSheet.child(styles, 'book', i, book.length);
return(
<View style={style} key={i}>
<Text style={style}>{book.title}</Text>
</View>
);
});