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> 
); 
});