css - React-native CSS 'last-child' 属性

标签 css react-native css-selectors

这是我的代码:

<ListView style={styles.mainContent}
    ref={(scrollView) => { _scrollView = scrollView; }}
    dataSource={this.state.dataSource}
    renderRow={this.renderRow.bind(this)}
/>

以及该代码的样式:

mainContent: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderBottomColor: '#CCCCCC',
    paddingLeft: 15,
    paddingRight: 15
},

现在,每个“ListView”都有一个边框,在最后一部分,我希望删除或覆盖该边框。但是在 react-native 中是不可能使用 :last-child 的。

我已经尝试使用给定的答案 here ,但我无法得到结果。 (我还是 React(-native) 的新手)

有人有想法吗?

最佳答案

不使用 ListView,而是尝试使用 ScrollView 并像下面的示例一样迭代要显示的元素(假设变量 DataSource 是您要呈现的值数组)

render() {
  const innerElems = DataSource.map((e, i) => {
    if (i === DataSource.length - 1) {
      // check if it's last elem, if so the no border style that you want
      return <View style={styles.noBottomBorder}> ... </View>
    } 
    return <View style={styles.withBottomBorder}> ... </View>
  });
  return (
    <ScrollView style={styles.mainContent}>
      {innerElems}
    </ScrollView>
  );
}

关于css - React-native CSS 'last-child' 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43326697/

相关文章:

css - 为什么较早的 CSS 规则会覆盖较晚的规则?

html - 如何通过删除特定文本使用CSS或Xpath获取元素?

javascript - 如何使用固定元素使一个优于另一个?

html - 具有行高/填充问题的标题的边框底部

ios - React Native 指纹采集

react-native - react-native 中渲染的用途和功能是什么?

ios - 子项目找不到通过 Pods 安装的 Swift 模块

html - 如何在 css/scss 中从 child 定位 parent 的 sibling ?

html - 跨度的 CSS 问题

javascript - 可滚动元素被 overlay div 阻塞