如何获取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才能执行此操作。

来自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对象中。存储它的密钥被视为sectionId的{​​{1}}。在这种情况下，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

以下是它最终的表现：

Answer 2

现在，如果您查看this code，您可能会注意到Category是ScrollView的直接子项（带有tabTitle='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 然后拉出列表，列表视图会正确滚动，并且节标题会以我期望的方式粘贴。

但是，如果我最初点击（连续按住鼠标按钮）并向下拉列表然后尝试将其拉出，则列表及其部分标题会在标签栏后面滑动，从而显示原始行为，这是不是我想看到的。

拉出列表

最初拉下来，然后拉出列表