feed_page: {
margin: 'auto'
},
feed_list: {
margin: 'auto'
},
feed_item: {
textAlign: 'center',
backgroundColor: '#fff',
borderBottom: '1px solid #e0e0e0',
margin: '10px'
}
// ...
<
div style = {
this.stylesheet.feed_page
} >
<
List style = {
this.stylesheet.feed_list
}
height = {
1400
}
rowCount = {
this.testPosts.length
}
rowHeight = {
50
}
width = {
800
}
rowRenderer = {
this.b_listItemRender
}
/> <
/div>
listItemRender({
index, // Index of row
isScrolling, // The List is currently being scrolled
isVisible, // This row is visible within the List (eg it is not an overscanned row)
key, // Unique key within array of rendered rows
parent, // Reference to the parent List (instance)
style
}) {
style = {
...style,
...this.stylesheet.feed_item
}
return ( <
div key = {
key
}
style = {
style
} > {
this.testPosts[index]
} <
/div>
);
}
that leads to (I manually adjusted the background for one row):
https://i.sstatic.net/n9ZwK.png
There are two problems:
The spacing between rows is not consistent
The borderBottom appears behind the next row's background, but shifting down by 1px or setting a height of 49px resolves the issue.
What did I do wrong? I want each row to have a border and be spaced properly.