fix stickySectionHeader re-render issue
Summary: Close #13500 I've been bothered by this issue for quite a long time, finally get some time to look into it. I find the root cause is that after a prop of the native driven node is assigned with a plain value, if you set it to be a `Animated.Value` again , it will take no effect any more, so I just keep it be a `Animated.Value` all the time. `value --> Animated.Value (✅) --> value (✅) --> Animated.Value (❌)` ping janicduplessis Closes https://github.com/facebook/react-native/pull/13885 Differential Revision: D5077094 Pulled By: javache fbshipit-source-id: 3fb5d8196d94101200394b2bb2b95c776fb1d2f3
This commit is contained in:
parent
784f89d0c9
commit
872fbc27fe
|
@ -61,8 +61,9 @@ class ScrollViewStickyHeader extends React.Component {
|
|||
|
||||
render() {
|
||||
const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
|
||||
const inputRange: Array<number> = [-1, 0];
|
||||
const outputRange: Array<number> = [0, 0];
|
||||
|
||||
let translateY;
|
||||
if (measured) {
|
||||
// The interpolation looks like:
|
||||
// - Negative scroll: no translation
|
||||
|
@ -74,8 +75,8 @@ class ScrollViewStickyHeader extends React.Component {
|
|||
// header to continue scrolling up and make room for the next sticky header.
|
||||
// In the case that there is no next header just translate equally to
|
||||
// scroll indefinetly.
|
||||
const inputRange = [-1, 0, layoutY];
|
||||
const outputRange: Array<number> = [0, 0, 0];
|
||||
inputRange.push(layoutY);
|
||||
outputRange.push(0);
|
||||
// Sometimes headers jump around so we make sure we don't violate the monotonic inputRange
|
||||
// condition.
|
||||
const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
|
||||
|
@ -86,14 +87,12 @@ class ScrollViewStickyHeader extends React.Component {
|
|||
inputRange.push(layoutY + 1);
|
||||
outputRange.push(1);
|
||||
}
|
||||
translateY = this.props.scrollAnimatedValue.interpolate({
|
||||
inputRange,
|
||||
outputRange,
|
||||
});
|
||||
} else {
|
||||
translateY = 0;
|
||||
}
|
||||
|
||||
const translateY = this.props.scrollAnimatedValue.interpolate({
|
||||
inputRange,
|
||||
outputRange,
|
||||
});
|
||||
const child = React.Children.only(this.props.children);
|
||||
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue