React native 如何使ListView节标题保持不变

我在屏幕顶部显示了一些按钮（用于反应本机可滚动选项卡视图）。在按钮下面，我有

列表视图

，上面有节标题

当我滚动时，有没有办法让标题粘贴到选项卡视图的底部边缘

我很难让

ListView

的部分标题粘贴到Facebook选项卡的底部，默认情况下是粘贴到屏幕的顶部

当我滚动时，节标题在选项卡栏下滑动

有什么想法吗？FacebookTabBar.js中有什么我应该更改的吗

顶部没有选项卡栏

顶部有选项卡栏

注意：奇怪的是，这个GIF不能正确显示完整的动画；您可以想象列表滚动了很多次，并且节标题在选项卡栏下滑动

章节标题样式

catListHeaderContainer:{
填充：12，
背景颜色：“#1F2036”，
}

FacebookTabBar样式

var styles=StyleSheet.create({
选项卡：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
填充底部：10，
},
选项卡：{
身高：60，
flexDirection:'行'，
paddingTop:5，
边框宽度：0，
borderTopWidth:0，
borderLeftWidth:0，
borderRightWidth:0，
borderBottomColor:“rgba（0,0,0,0）”，
},
activeTabTitle：{
玛金托普：40，
颜色：“#3B5998”，
},
非活动字幕：{
玛金托普：40，
颜色：“#bdbd”，
},
});

ListView标题不会粘住，您需要使用

renderSectionHeader

和

cloneWithRows和Sections

而不是

cloneWithRows

来执行此操作

从本地

我今天处理了同样的问题。我是这样处理的。首先，在

getInitialState

中：

getInitialState: function() {

  return {
    dataBlob: {},
    dataSource: new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2,
    sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    }),
  }
},

然后，在返回数据的API调用期间，我将该响应数据添加到我的

dataBlob

对象中。存储它的键被认为是

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

（在我的例子中是一个对象）作为第一个参数，以及

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: function(sectionData, sectionID) {
    return (
      <View style={styles.section}>
        <Text style={styles.sectionText}>{sectionID}</Text>
      </View>
      )
  },

下面是它最后的样子：

---

现在，如果您查看一下，您可能会注意到

Category

是

ScrollView

的直接子项（带有

tabTitle='Search'

的标记）

我试图让

视图

成为

滚动视图

的直接子对象，并将

类别

作为

视图

的子对象写入

然后，我用以下方式设置了

View

：

类别包含：{
排名：0，
高度：设备高度，
},

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

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

打开列表

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

---

谢谢你，Richard，我现在使用cloneWithRowsAndSections。区段标题正确地粘附在屏幕顶部。我现在正在研究如何使节头与顶部保持一定距离。我编辑了我原来的帖子来澄清我的意思。看起来我可能需要找到代码中告诉节头贴在顶部的部分，也许这会给我更多关于如何继续让标题粘贴到远离顶部的其他位置的信息。你能告诉我你的导航/选项卡栏和分区标题的样式吗？谢谢你的回复Richard，我已经用样式更新了原始帖子。另外，我在这里发布了ListView、FacebookTabBar和索引代码：我想我离实现这一点有点近了。请看下面我的发现。谢谢Richard，原来解决方案就在我眼皮底下。我用我自己的答案更新了这篇文章，如下所示。除了我在这篇文章中所做的更改外，在ScrollView中添加scrollEnabled={false}修复了这个问题。

  renderSectionHeader: function(sectionData, sectionID) {
    return (
      <View style={styles.section}>
        <Text style={styles.sectionText}>{sectionID}</Text>
      </View>
      )
  },