mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-23 03:50:11 +08:00
Implement ScrollView sticky headers on Android
Summary: This adds support for sticky headers on Android. The implementation if based primarily on the iOS one (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L272) and adds some stuff that was missing to be able to handle z-index, view clipping, view hierarchy optimization and touch handling properly. Some notable changes: - Add `ChildDrawingOrderDelegate` interface to allow changing the `ViewGroup` drawing order using `ViewGroup#getChildDrawingOrder`. This is used to change the content view drawing order to make sure headers are drawn over the other cells. Right now I'm only reversing the drawing order as drawing only the header views last added a lot of complexity especially because of view clipping and I don't think it should cause issues. - Add `collapsableChildren` prop that works like `collapsable` but applies to every child of the view. This is needed to be able to reference sticky headers by their indices otherwise some subviews can get optimized out and break indexes. Closes https://github.com/facebook/react-native/pull/9456 Differential Revision: D3827366 fbshipit-source-id: cab044cfdbe2ccb98e1ecd3e02ed3ceaa253eb78
This commit is contained in:
committed by
Facebook Github Bot 4
parent
272d3ded4f
commit
0e8b75b22c
@@ -263,7 +263,6 @@ const ScrollView = React.createClass({
|
||||
* `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
|
||||
* top of the scroll view. This property is not supported in conjunction
|
||||
* with `horizontal={true}`.
|
||||
* @platform ios
|
||||
*/
|
||||
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number),
|
||||
style: StyleSheetPropType(ViewStylePropTypes),
|
||||
@@ -453,7 +452,8 @@ const ScrollView = React.createClass({
|
||||
ref={this._setInnerViewRef}
|
||||
style={contentContainerStyle}
|
||||
removeClippedSubviews={this.props.removeClippedSubviews}
|
||||
collapsable={false}>
|
||||
collapsable={false}
|
||||
collapseChildren={!this.props.stickyHeaderIndices}>
|
||||
{this.props.children}
|
||||
</View>;
|
||||
|
||||
|
||||
@@ -473,6 +473,15 @@ const View = React.createClass({
|
||||
*/
|
||||
collapsable: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Same as `collapsable` but also applies to all of this view's children.
|
||||
* Setting this to `false` ensures that the all children exists in the native
|
||||
* view hierarchy.
|
||||
*
|
||||
* @platform android
|
||||
*/
|
||||
collapseChildren: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Whether this `View` needs to rendered offscreen and composited with an alpha
|
||||
* in order to preserve 100% correct colors and blending behavior. The default
|
||||
|
||||
Reference in New Issue
Block a user