React Native - CSS: con cuối cùng không có đường viền?

Question

Trong Phản ứng Native, tôi có một mảng tĩnh của cuốn sách mà tôi đồ hơn và đầu ra trong hàng xếp chồng lên nhau như thế này:

return books.map((book, i) => { 
    return(
    <View style={styles.book} key={i}> 
     <Text style={styles.book}>{book.title}</Text> 
    </View> 
); 
}); 

Tôi cũng có đường viền đáy trên mỗi cuốn sách qua styles.book:

book: { 
    borderBottomWidth: 1, 
    borderBottomColor: '#000000' 
} 

Tôi cần cuốn sách cuối cùng trong danh sách KHÔNG có đường viền dưới cùng, vì vậy tôi cần áp dụng borderBottomWidth: 0 cho nó mà tôi nghĩ? Trong React Native, làm thế nào tôi có thể nhận được cuốn sách cuối cùng trong danh sách để không có biên giới dưới cùng? (Trong css bình thường chúng ta muốn sử dụng cuối cùng con)

Answer 1

Bạn có thể đạt được điều này bằng một số 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ều này không là kiểm tra xem i, iterator, bằng với mảng sách của length - 1.

Answer 2

Bạn có thể thử extended-stylesheet hỗ trợ :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> 
); 
});