这是我的代码:
<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/