web-dev-qa-db-ja.com

ListViewセクションヘッダーを固定する方法

画面の上部にボタンが表示されています（使用react-native-scrollable-tab-view）。ボタンの下には、セクションヘッダーが付いたListViewがあります。

スクロールしているときにヘッダーをタブビューの下端に固定する方法はありますか？

ListViewのセクションヘッダーをFacebookTabBarの下部に固定するのに苦労しました。デフォルトでは、画面の上部に固定されます。

スクロールすると、セクションヘッダーがタブバーの下にスライドします。

これについて何か考えはありますか？これを機能させるためにFacebookTabBar.jsで変更する必要があるものはありますか？

上部にタブバーなし

nobar

上部にタブバーあり

注：このGIFが完全なアニメーションを正しく表示しないのは奇妙です。リストが頻繁にスクロールされ、セクションヘッダーがタブバーの下にスライドすることを想像できます。

withbar

セクションヘッダースタイル

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

});
react-nativereact-native-listview
11
Ji Park

今、 このコード を見ると、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をクリックしてからリストを引き上げると、リストビューが適切にスクロールし、セクションヘッダーが邪魔になるためです。私が期待していること。

ただし、最初にクリックして（マウスボタンを押し続けて）リストをプルダウンしてからプルアップしようとすると、リストとそのセクションヘッダーがタブバーの後ろにスライドし、元の動作が表示されます。これは私が行ったことではありません。見たい。

リストをプルアップ

enter image description here

最初にプルダウンしてからリストをプルアップします

enter image description here

2
Ji Park

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オブジェクトに追加します。それを格納するキーは、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の外観です。

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

最終的には次のようになります。 imgur

21
Richard Kho