react / react/react-native

[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted

オープン
#18,945 コメント 56 件 リアクション 18 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Bug Component: SectionList Resolution: PR Submitted
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.6.0
Yarn: 1.5.1
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Steps to Reproduce

Clone this repository and run it via react-native run-ios.
Observe the section separators are in wrong (randomly?) places.

Expected Behavior

The section list headers should be in the top of the section instead of the bottom like section footers do with an inverted list (but they aren't sticky).

Expected gif:

kapture 2018-04-19 at 13 46 22

Actual Behavior

The section headers are footers instead of headers. They are sticky because of https://github.com/facebook/react-native/pull/17762 but still footers, not headers.

Sample code:

export default class App extends React.Component {
  render() {
    return (
      <View style={s.container}>
        <SectionList
          inverted
          sections={mock.sections}
          maxToRenderPerBatch={10}
          initialNumToRender={10}
          style={{ flex: 1 }}
          keyExtractor={(item) => item.messageId}
          renderSectionHeader={sectionProps => (
            <SectionHeader
              {...sectionProps}
            />
          )}
          renderItem={({ item }) => (
            <ListItem
              item={item}
            />
          )}
          ItemSeparatorComponent={ItemSeparator}
        />
        />
      </View>
    );
  }
}
Problem Gif:

kapture 2018-04-19 at 13 43 42

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、リンク先の React Native の再現コードを clone し、react-native run-ios で実行して、反転した SectionList の動作を確認します。SectionList のエントリポイントと既存の反転リスト処理を調べ、その結果を期待される GIF と問題の GIF と比較します。完了の条件は、header が footer のように動作するのではなく、それぞれのセクションの上部に留まることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。