React Native - CSS: last-child senza un bordo?

Question

In React nativo, ho una matrice statica di libri che programma sopra ed emessi in file sovrapposte simili:

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

Ho anche un bordo inferiore su ogni prodotto via styles.book:

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

Ho bisogno dell'ultimo libro nell'elenco per NON avere un bordo inferiore, quindi dovrò applicare borderBottomWidth: 0 ad esso, credo? In React Native, come posso ottenere l'ultimo libro nell'elenco per non avere quel bordo inferiore? (In css normali avremmo usato last-child)

Answer 1

si potrebbe ottenere questo con una certa logica:

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

Quello che fa è controllare se i, l'iteratore, è uguale alla matrice libri di length - 1.

Answer 2

Si può provare extended-stylesheet che supporta :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> 
); 
});