mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-13 03:22:56 +00:00
[fix] Animated works with compiled styles
Animated should now work with compiled and extracted styles. The original styles are passed to components, rather than being flattened into a new object that cannot be used by the style runtime to either lookup the results of StyleSheet.create calls or consume extracted styles. Inline styles that use AnimatedValue are moved into a seperate object that is appended to the original styles. Fix #2387
This commit is contained in:
committed by
Nicolas Gallagher
parent
e68c327707
commit
1f5d0925a5
@@ -19,19 +19,32 @@ import StyleSheet from '../../../../exports/StyleSheet';
|
||||
|
||||
const flattenStyle = StyleSheet.flatten;
|
||||
|
||||
function createAnimatedStyle(inputStyle: any): Object {
|
||||
const style = flattenStyle(inputStyle);
|
||||
const animatedStyles = {}
|
||||
for (const key in style) {
|
||||
const value = style[key];
|
||||
if (key === 'transform') {
|
||||
animatedStyles[key] = new AnimatedTransform(value);
|
||||
}
|
||||
else if (value instanceof AnimatedNode) {
|
||||
animatedStyles[key] = value;
|
||||
}
|
||||
else if (value && !Array.isArray(value) && typeof value === 'object') {
|
||||
animatedStyles[key] = createAnimatedStyle(value);
|
||||
}
|
||||
}
|
||||
return animatedStyles;
|
||||
}
|
||||
|
||||
class AnimatedStyle extends AnimatedWithChildren {
|
||||
_inputStyle: any;
|
||||
_style: Object;
|
||||
|
||||
constructor(style: any) {
|
||||
super();
|
||||
style = flattenStyle(style) || {};
|
||||
if (style.transform) {
|
||||
style = {
|
||||
...style,
|
||||
transform: new AnimatedTransform(style.transform),
|
||||
};
|
||||
}
|
||||
this._style = style;
|
||||
this._inputStyle = style;
|
||||
this._style = createAnimatedStyle(style);
|
||||
}
|
||||
|
||||
// Recursively get values for nested styles (like iOS's shadowOffset)
|
||||
@@ -55,8 +68,11 @@ class AnimatedStyle extends AnimatedWithChildren {
|
||||
return updatedStyle;
|
||||
}
|
||||
|
||||
__getValue(): Object {
|
||||
return this._walkStyleAndGetValues(this._style);
|
||||
__getValue(): Array<Object> {
|
||||
return [
|
||||
this._inputStyle,
|
||||
this._walkStyleAndGetValues(this._style)
|
||||
];
|
||||
}
|
||||
|
||||
// Recursively get animated values for nested styles (like iOS's shadowOffset)
|
||||
|
||||
Reference in New Issue
Block a user