如何获取要粘贴的ListView节标题 [英] How to Get ListView Section Header to Stick

问题描述

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

I have buttons displayed on the top of the screen (used react-native-scrollable-tab-view). Underneath the buttons, I have ListView with section header on it.

在滚动时是否有一种方法可以使标头粘贴到选项卡视图的底部边缘?

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的底部，并且默认将其粘贴到屏幕的顶部.

I have had a hard time trying to get ListView's section header to stick to the bottom of Facebook TabBar, and its default is to stick to the top of the screen.

滚动时，节标题会在标签栏下方滑动.

When I scroll, the section header slides under the tab-bar.

对此有何想法?为了使这项工作有效，我需要在FacebookTabBar.js中进行任何更改吗?

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

顶部没有标签栏

顶部带有标签栏

注意 :奇怪的是，该GIF无法正确显示完整的动画；您可以想象列表滚动了很多，并且节标题滑到了标签栏的下方.

Note: It is strange how this GIF does not show the full animation correctly; you can imagine that the list is scrolled a lot and the section header slides under the tab bar.

部分标题样式

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

});

推荐答案

现在，如果您看看此代码，您可能会注意到Category是ScrollView的直接子代(带有tabTitle='Search'的标记).

Right now if you take a look at this code, you may notice that Category is a direct child of ScrollView (the tag with tabTitle='Search').

我要进行这项工作的尝试是让View作为ScrollView的直接子代，并将Category写为View的子代.

My attempt to make this work was to let View be the direct child of ScrollView and write Category as the child of View.

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

然后我通过以下方式设置View的样式:

Then I styled View in the following way:

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

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

This seems to have solved the problem partially. Partially, because for example, if I click Cell 2 and then pull the list up, the list view scrolls properly, and the section headers stick in the way that I expect.

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

However, if I initially click (continuously holding down the mouse button) and pull down the list and then try pulling it up after that, the list and its section header slide behind the tab bar thus showing the original behavior, which is not what I want to see.

上拉列表

最初拉低，然后拉高列表

这篇关于如何获取要粘贴的ListView节标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！