Fix that section headers in SectionList don't stick at correct position.
Summary: I noticed that section headers in SectionList don't stick at correct position in case of using with contentInset and contentOffset. (See the demo below. It looks that contentInset.top is ignored.) This is a common case of use of NavigationBar and TableView on iOS. ![](https://user-images.githubusercontent.com/143255/29018708-1e2f98aa-7b97-11e7-9599-19dbb832266d.gif) Here is a demo and an example code: ![](https://user-images.githubusercontent.com/143255/29018753-4201f660-7b97-11e7-9d31-28413d1b6269.gif) ```jsx import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, SectionList, } from 'react-native'; export default class RNScrollExample extends Component { renderSectionHeader(title) { return ( <View style={styles.sectionHeader}> <Text>{title}</Text> </View> ) } renderItem(content) { return ( <View style={styles.cell}> <Text>{`Item ${content}`}</Text> </View> ) } renderSeparator() { return <View style={styles.separator} /> } renderSectionList() { const sections = Array.from(Array(10), (e, i) => ({ title: `Section ${i+1}`, data: Array.from(Array(10)).map((e, i) => i+1) })) const navigationBarHeight = 64 return ( <SectionList contentInset={{ top: navigationBarHeight }} contentOffset={{ y: -navigationBarHeight }} sections={sections} keyExtractor={(item, index) => index} renderSectionHeader={({ section }) => this.renderSectionHeader(section.title)} renderItem={({ item }) => this.renderItem(item)} ItemSeparatorComponent={this.renderSeparator} /> ) } renderHeader() { return ( <View style={styles.header}> <Text style={styles.headerText}>Contents</Text> </View> ) } render() { return ( <View> {this.renderSectionList()} {this.renderHeader()} </View> ) } } const styles = StyleSheet.create({ header: { position: 'absolute', top: 0, left: 0, right: 0, height: 64, paddingTop: 20, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffffcc', }, headerText: { fontSize: 16, fontWeight: 'bold', }, sectionHeader: { paddingHorizontal: 8, paddingVertical: 4, backgroundColor: '#05bbd3', }, cell: { paddingHorizontal: 8, paddingVertical: 16, backgroundColor: '#82dde9', }, separator: { height: 1, backgroundColor: '#7d888d', }, }); AppRegistry.registerComponent('RNScrollExample', () => RNScrollExample); ``` Closes https://github.com/facebook/react-native/pull/15395 Differential Revision: D5988720 Pulled By: shergin fbshipit-source-id: d33f6ee943d4f913970e26c322b66b3c9c948a02
This commit is contained in:
parent
9424cd7e8f
commit
a541d58bc4
|
@ -447,7 +447,8 @@ const ScrollView = createReactClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
this._scrollAnimatedValue = new Animated.Value(0);
|
this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
|
||||||
|
this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
|
||||||
this._stickyHeaderRefs = new Map();
|
this._stickyHeaderRefs = new Map();
|
||||||
this._headerLayoutYs = new Map();
|
this._headerLayoutYs = new Map();
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue