mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-03 17:45:12 +08:00
Summary:
Re-applying the diff that was reverted in D4659669 / b87f4abf78 because of some crashes with fixes from D4659708 merged in.
---
Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.
What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.
**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697
Reviewed By: fkgozali
Differential Revision: D4661105
Pulled By: sahrens
fbshipit-source-id: c719dc85f45c1a142ef5b9ebfe0a82ae8ec66497
193 lines
6.1 KiB
JavaScript
193 lines
6.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule NativeAnimatedHelper
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
const NativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
|
|
const NativeEventEmitter = require('NativeEventEmitter');
|
|
|
|
const invariant = require('fbjs/lib/invariant');
|
|
|
|
let __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
|
|
let __nativeAnimationIdCount = 1; /* used for started animations */
|
|
|
|
type EndResult = {finished: boolean};
|
|
type EndCallback = (result: EndResult) => void;
|
|
type EventMapping = {
|
|
nativeEventPath: Array<string>,
|
|
animatedValueTag: ?number,
|
|
};
|
|
|
|
let nativeEventEmitter;
|
|
|
|
/**
|
|
* Simple wrappers around NativeAnimatedModule to provide flow and autocmplete support for
|
|
* the native module methods
|
|
*/
|
|
const API = {
|
|
createAnimatedNode: function(tag: ?number, config: Object): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.createAnimatedNode(tag, config);
|
|
},
|
|
startListeningToAnimatedNodeValue: function(tag: ?number) {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.startListeningToAnimatedNodeValue(tag);
|
|
},
|
|
stopListeningToAnimatedNodeValue: function(tag: ?number) {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.stopListeningToAnimatedNodeValue(tag);
|
|
},
|
|
connectAnimatedNodes: function(parentTag: ?number, childTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag);
|
|
},
|
|
disconnectAnimatedNodes: function(parentTag: ?number, childTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.disconnectAnimatedNodes(parentTag, childTag);
|
|
},
|
|
startAnimatingNode: function(animationId: ?number, nodeTag: ?number, config: Object, endCallback: EndCallback): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.startAnimatingNode(animationId, nodeTag, config, endCallback);
|
|
},
|
|
stopAnimation: function(animationId: ?number) {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.stopAnimation(animationId);
|
|
},
|
|
setAnimatedNodeValue: function(nodeTag: ?number, value: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.setAnimatedNodeValue(nodeTag, value);
|
|
},
|
|
setAnimatedNodeOffset: function(nodeTag: ?number, offset: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.setAnimatedNodeOffset(nodeTag, offset);
|
|
},
|
|
flattenAnimatedNodeOffset: function(nodeTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.flattenAnimatedNodeOffset(nodeTag);
|
|
},
|
|
extractAnimatedNodeOffset: function(nodeTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.extractAnimatedNodeOffset(nodeTag);
|
|
},
|
|
connectAnimatedNodeToView: function(nodeTag: ?number, viewTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.connectAnimatedNodeToView(nodeTag, viewTag);
|
|
},
|
|
disconnectAnimatedNodeFromView: function(nodeTag: ?number, viewTag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.disconnectAnimatedNodeFromView(nodeTag, viewTag);
|
|
},
|
|
dropAnimatedNode: function(tag: ?number): void {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.dropAnimatedNode(tag);
|
|
},
|
|
addAnimatedEventToView: function(viewTag: ?number, eventName: string, eventMapping: EventMapping) {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.addAnimatedEventToView(viewTag, eventName, eventMapping);
|
|
},
|
|
removeAnimatedEventFromView(viewTag: ?number, eventName: string, animatedNodeTag: ?number) {
|
|
assertNativeAnimatedModule();
|
|
NativeAnimatedModule.removeAnimatedEventFromView(viewTag, eventName, animatedNodeTag);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Styles allowed by the native animated implementation.
|
|
*
|
|
* In general native animated implementation should support any numeric property that doesn't need
|
|
* to be updated through the shadow view hierarchy (all non-layout properties).
|
|
*/
|
|
const STYLES_WHITELIST = {
|
|
opacity: true,
|
|
transform: true,
|
|
/* legacy android transform properties */
|
|
scaleX: true,
|
|
scaleY: true,
|
|
translateX: true,
|
|
translateY: true,
|
|
};
|
|
|
|
const TRANSFORM_WHITELIST = {
|
|
translateX: true,
|
|
translateY: true,
|
|
scale: true,
|
|
scaleX: true,
|
|
scaleY: true,
|
|
rotate: true,
|
|
rotateX: true,
|
|
rotateY: true,
|
|
perspective: true,
|
|
};
|
|
|
|
function validateTransform(configs: Array<Object>): void {
|
|
configs.forEach((config) => {
|
|
if (!TRANSFORM_WHITELIST.hasOwnProperty(config.property)) {
|
|
throw new Error(`Property '${config.property}' is not supported by native animated module`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function validateStyles(styles: Object): void {
|
|
for (var key in styles) {
|
|
if (!STYLES_WHITELIST.hasOwnProperty(key)) {
|
|
throw new Error(`Style property '${key}' is not supported by native animated module`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function validateInterpolation(config: Object): void {
|
|
var SUPPORTED_INTERPOLATION_PARAMS = {
|
|
inputRange: true,
|
|
outputRange: true,
|
|
extrapolate: true,
|
|
extrapolateRight: true,
|
|
extrapolateLeft: true,
|
|
};
|
|
for (var key in config) {
|
|
if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
|
|
throw new Error(`Interpolation property '${key}' is not supported by native animated module`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function generateNewNodeTag(): number {
|
|
return __nativeAnimatedNodeTagCount++;
|
|
}
|
|
|
|
function generateNewAnimationId(): number {
|
|
return __nativeAnimationIdCount++;
|
|
}
|
|
|
|
function assertNativeAnimatedModule(): void {
|
|
invariant(NativeAnimatedModule, 'Native animated module is not available');
|
|
}
|
|
|
|
function isNativeAnimatedAvailable(): boolean {
|
|
return !!NativeAnimatedModule;
|
|
}
|
|
|
|
module.exports = {
|
|
API,
|
|
validateStyles,
|
|
validateTransform,
|
|
validateInterpolation,
|
|
generateNewNodeTag,
|
|
generateNewAnimationId,
|
|
assertNativeAnimatedModule,
|
|
isNativeAnimatedAvailable,
|
|
get nativeEventEmitter() {
|
|
if (!nativeEventEmitter) {
|
|
nativeEventEmitter = new NativeEventEmitter(NativeAnimatedModule);
|
|
}
|
|
return nativeEventEmitter;
|
|
},
|
|
};
|