react-native - 如何让 ListView 部分标题保持不变

Question

我在屏幕顶部显示按钮(使用 react-native-scrollable-tab-view )。在按钮下方，我有 ListView上面有节标题。

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

我很难获得 ListView的部分标题贴在 Facebook TabBar 的底部，它的默认值是贴在屏幕的顶部。

当我滚动时，部分标题会在标签栏下方滑动。

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

顶部没有标签栏



顶部带有标签栏

备注 :奇怪的是，这个 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',
  },

});

Answer 1

ListView 标题不粘，你需要使用 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目的。存储它的 key 被认为是 sectionId为 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 的可选参数和 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>
      )
  },

这是它最终的样子: