11

画面の上部にボタンが表示されています ( 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',
  },

});
4

2 に答える 2

21

ListView ヘッダーは固執しません。これを行う代わりにrenderSectionHeaderandを使用する必要があります。cloneWithRowsAndSectionscloneWithRows

ListViewの React Nativeドキュメントから

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オブジェクトに追加します。それを格納するキーはsectionIdforと見なされ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>
      )
  },

最終的には次のようになります。 イムグル

于 2015-06-26T08:53:53.207 に答える