如何获取ListView节标题

Question

我在屏幕顶部显示了按钮(使用react-native-scrollable-tab-view).在按钮下面,我有ListView部分标题.

滚动时有没有办法让标题粘在标签视图的下边缘？

我很难尝试将ListView标题标题粘在Facebook TabBar的底部,它的默认设置是坚持屏幕顶部.

当我滚动时,节标题在标签栏下滑动.

有什么想法吗？我应该在FacebookTabBar.js中做些什么来改变这项工作吗？

顶部没有标签栏

标签栏位于顶部

注意:奇怪的是这个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这样做.

来自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对象中.存储它的关键是考虑到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>
      )
  },

以下是它最终的表现:

Answer 2

现在，如果您查看此代码，您可能会注意到它是（标记）Category的直接子级。ScrollViewtabTitle='Search'

我尝试让这项工作成为 的View直接子代ScrollView并Category作为 的子代来编写View。

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

然后我View按照以下方式设计样式：

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

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

但是，如果我最初单击（连续按住鼠标按钮）并下拉列表，然后尝试将其向上拉，则列表及其节标题会滑到选项卡栏后面，从而显示原始行为，这不是我想要的想看看。

拉出列表

首先下拉列表，然后向上拉列表