小编典典

React Native-CSS:无边界的最后一个孩子?

reactjs

在React Native中,我有一个静态的书本数组,可以将其映射并像这样堆叠成行输出:

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中,我们将使用上一个孩子)


阅读 380

收藏
2020-07-22

共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迭代器是否等于books数组的length - 1

2020-07-22