如何让 ListView 部分 Header 保持不变

Question

我在屏幕顶部显示了按钮（使用 react-native-scrollable-tab-view）。在按钮下方，我有 ListView 和 header 部分。

Is there a way to get the header to stick to the bottom edge of the tab-view when I am scrolling?

我很难让 ListView 的部分 header 贴在 Facebook TabBar 的底部，它的默认设置是贴在屏幕顶部。

当我滚动时，header 部分会滑到 tab-bar 下方。

Any thoughts on this? Is there anything I should change in FacebookTabBar.js to make this work?

顶部没有标签栏

顶部有标签栏

注意：奇怪的是这个GIF怎么没有正确显示完整的动画；你可以想象列表滚动了很多，header 部分在标签栏下滑动。

节 header 样式

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',
  },

});

Answer 1

ListView Headers 不要坚持，你需要使用 renderSectionHeader 和 cloneWithRowsAndSections 而不是 cloneWithRows 来做到这一点。

来自 React Native documentation on ListView

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 object。存储它的密钥被认为是 ListView.DataSource 的 sectionId。在这种情况下，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（在我的例子中，一个 object）作为它的第一个参数，以及 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>
      )
  },

最后是这样的：

Answer 2

现在如果你看一下 this code，你可能会注意到 Category 是 ScrollView 的直接 child（带有 [=14= 的标签） ]).

我的尝试是让 View 成为 ScrollView 的直接 child 并将 Category 写为 [=] 的 child 15=].

<ScrollView tabTitle='Search' tabLabel="ion|ios-search" style={styles.tabView}>
  <View style={styles.categoryContain}>
    <Category/>
  </View>
</ScrollView>

然后我按以下方式设置 View 的样式：

categoryContain: {
  top: 0,
  height: deviceHeight,
},

这似乎部分解决了问题。部分原因是，例如，如果我单击 Cell 2 然后向上拉列表，列表视图会正确滚动，并且 header 部分会按照我期望的方式固定.

但是，如果我最初单击（持续按住鼠标按钮）并向下拉列表，然后尝试将其向上拉，列表及其部分 header 会滑到标签栏后面，从而显示原来的行为，这不是我想看到的。

正在拉起榜单

先下拉，再上拉列表

如何让 ListView 部分 Header 保持不变

How to Get ListView Section Header to Stick

react-native

react-native-listview