[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
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:

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:

コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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