如何让 ListView 部分标题固定下来

我的按钮显示在屏幕顶部（使用反应本机可滚动选项卡视图）。在按钮下面，我有ListView上面有节标题。

当我滚动时，有没有办法让标题粘在选项卡视图的底部边缘？

我很难得到ListView的节标题粘在 Facebook TabBar 的底部，默认情况下粘在屏幕顶部。

当我滚动时，部分标题会滑到选项卡栏下方。

对此有什么想法吗？我应该在 FacebookTabBar.js 中更改什么才能使其正常工作吗？

顶部没有标签栏

顶部有标签栏

Note：很奇怪这个 GIF 没有正确显示完整的动画；您可以想象列表滚动了很多并且部分标题在选项卡栏下方滑动。

节标题样式

catListHeaderContainer: {
    padding: 12,
    backgroundColor: '#1F2036',
}

FacebookTabBar 样式

var styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },

  tabs: {
    height: 60,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0)',
  },

  activeTabTitle: {
    marginTop: 40,
    color: '#3B5998',
  },

  nonActiveTabTitle: {
    marginTop: 40,
    color: '#BDBDBD',
  },

});

ListView headers 不粘，你需要使用renderSectionHeader and cloneWithRowsAndSections代替cloneWithRows去做这个。

来自 React NativeListView 的文档 https://facebook.github.io/react-native/docs/listview.html#content

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目的。存储它的密钥被认为是sectionId for 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接受一个dataBlob（在我的例子中，一个对象）作为它的第一个参数，以及可选参数sectionIDs and rowIDs.

就是这样renderListView looks:

  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 looks:

  renderSectionHeader: function(sectionData, sectionID) {
    return (
      <View style={styles.section}>
        <Text style={styles.sectionText}>{sectionID}</Text>
      </View>
      )
  },

Here's how it looks in the end: