Как заставить заголовок раздела ListView придерживаться

Заголовки ListView не прилипают, для этого вам нужно использовать renderSectionHeader и cloneWithRowsAndSections вместо cloneWithRows.

Из документации React Native по 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 для 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>
      )
  },

Вот как это выглядит в итоге:

Прямо сейчас, если вы посмотрите на этот код, вы можете заметить, что 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, а затем вытащу список вверх, представление списка прокрутится правильно, а заголовки разделов останутся такими, как я ожидал.

Однако, если я сначала щелкну (непрерывно удерживая нажатой кнопку мыши) и потяну список вниз, а затем попытаюсь вытащить его после этого, список и его заголовок раздела сместятся за панель вкладок, таким образом показывая исходное поведение, которое не то, что я хотеть увидеть.

Вытягивание списка

Сначала опустить, а затем открыть список