React Native - CSS：没有边界的最后一个孩子？

Question

在阵营母语，我的书，我映射了一个静态数组和输出在堆叠的行这样的：

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，我们会使用最后一子）

Answer 1

你可以做到这一点使用一些逻辑：

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。

Answer 2

您可以尝试extended-stylesheet支持: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> 
); 
});