mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-24 04:16:00 +08:00
Definable distance pagination for ScrollView
Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:    After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping. This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the Closes https://github.com/facebook/react-native/pull/1532 Reviewed By: @svcscm, @trunkagent Differential Revision: D2443701 Pulled By: @vjeux
This commit is contained in:
committed by
facebook-github-bot-7
parent
b9ef384f74
commit
dcf245a9a2
@@ -246,6 +246,27 @@ var ScrollView = React.createClass({
|
||||
*/
|
||||
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number),
|
||||
style: StyleSheetPropType(ViewStylePropTypes),
|
||||
/**
|
||||
* When set, causes the scroll view to stop at multiples of the value of
|
||||
* `snapToInterval`. This can be used for paginating through children
|
||||
* that have lengths smaller than the scroll view. Used in combination
|
||||
* with `snapToAlignment`.
|
||||
* @platform ios
|
||||
*/
|
||||
snapToInterval: PropTypes.number,
|
||||
/**
|
||||
* When `snapToInterval` is set, `snapToAlignment` will define the relationship
|
||||
* of the the snapping to the scroll view.
|
||||
* - `start` (the default) will align the snap at the left (horizontal) or top (vertical)
|
||||
* - `center` will align the snap in the center
|
||||
* - `end` will align the snap at the right (horizontal) or bottom (vertical)
|
||||
* @platform ios
|
||||
*/
|
||||
snapToAlignment: PropTypes.oneOf([
|
||||
'start', // default
|
||||
'center',
|
||||
'end',
|
||||
]),
|
||||
/**
|
||||
* Experimental: When true, offscreen child views (whose `overflow` value is
|
||||
* `hidden`) are removed from their native backing superview when offscreen.
|
||||
@@ -430,6 +451,8 @@ var validAttributes = {
|
||||
scrollsToTop: true,
|
||||
showsHorizontalScrollIndicator: true,
|
||||
showsVerticalScrollIndicator: true,
|
||||
snapToInterval: true,
|
||||
snapToAlignment: true,
|
||||
stickyHeaderIndices: {diff: deepDiffer},
|
||||
scrollEventThrottle: true,
|
||||
zoomScale: true,
|
||||
|
||||
Reference in New Issue
Block a user