ListView Headers 不粘，您需要使用renderSectionHeaderandcloneWithRowsAndSections而不是cloneWithRows这样做。
来自ListView 上的 React Native文档
renderSectionHeader function
(sectionData, sectionID) => renderable
If provided, a sticky header is rendered for this section. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header.
我今天解决了同样的问题。以下是我的处理方式。首先，在getInitialState：
getInitialState: function() {
return {
dataBlob: {},
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
}),
}
},
然后，在获取数据的 API 调用期间，我将该响应数据添加到我的dataBlob对象中。存储它的密钥被认为是sectionIdfor ListView.DataSource。在这种情况下，这sectionId将是我检索到的帖子的日期：
getAllPosts: function() {
api.getAllPosts()
.then((responseData) => {
var tempDataBlob = this.state.dataBlob;
var date = new Date(responseData.posts[0].day).toDateString();
tempDataBlob[date] = responseData.posts;
this.setState({
dataBlob: tempDataBlob
});
;
}).then(() => {
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(this.state.dataBlob),
loaded: true
})
})
.done();
},
cloneWithRowsAndSections接受 a dataBlob（在我的例子中，一个对象）作为它的第一个参数，以及 and 的可选sectionIDs参数rowIDs。
外观如下renderListView：
renderListView: function() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderPostCell}
renderSectionHeader={this.renderSectionHeader}
renderFooter={this.renderFooter}
onEndReached={() => {this.getAllPosts(this.state.currentDay)}}
onEndReachedThreshold={40}
style={styles.postsListView} />
)
},
renderSectionHeader外观如下：
renderSectionHeader: function(sectionData, sectionID) {
return (
<View style={styles.section}>
<Text style={styles.sectionText}>{sectionID}</Text>
</View>
)
},
这是它最终的样子：
