React Native - CSS :last-child 没有边框？答案

【问题标题】：React Native - CSS :last-child without a border?React Native - CSS :last-child 没有边框？
【发布时间】：2016-05-16 01:26:56
【问题描述】：

在 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 中，我们会使用 last-child）

【问题讨论】：

我不知道反应但底部没有到最后？像borderWidthBottom？
books[books.length - 1] 是 javascript 中的最后一本

标签： reactjs react-native

【解决方案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。

【讨论】：

谢谢，效果很好，刚刚添加了 - 1 来匹配最后一个键！

【解决方案2】：

你可以试试支持:last-child的extended-stylesheet：

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

【讨论】：