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

问题描述：

在阵营母语，我的书，我映射了一个静态数组和输出在堆叠的行这样的：React Native - CSS：没有边界的最后一个孩子？

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

我不知道反应，但底部不来在结束了吗？像borderWidthBottom？ – YOU

书[books.length - 1]是javascript中的最后一个 – YOU

答

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

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。

谢谢，效果很好，只需加上-1即可匹配最后一个键！ – Wonka

答

您可以尝试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> 
); 
});

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

相关推荐