diff --git a/src/apis/StyleSheet/__tests__/resolveTransform-test.js b/src/apis/StyleSheet/__tests__/resolveTransform-test.js index 642ddb71..6bb39a5e 100644 --- a/src/apis/StyleSheet/__tests__/resolveTransform-test.js +++ b/src/apis/StyleSheet/__tests__/resolveTransform-test.js @@ -7,6 +7,7 @@ describe('apis/StyleSheet/resolveTransform', () => { const resolvedStyle = {}; const style = { transform: [ + { perspective: 50 }, { scaleX: 20 }, { translateX: 20 }, { rotate: '20deg' } @@ -15,6 +16,7 @@ describe('apis/StyleSheet/resolveTransform', () => { resolveTransform(resolvedStyle, style); expect(resolvedStyle).toEqual({ + perspective: '50px', transform: 'scaleX(20) translateX(20px) rotate(20deg)' }); }); diff --git a/src/apis/StyleSheet/resolveTransform.js b/src/apis/StyleSheet/resolveTransform.js index 7ce4e096..67de86df 100644 --- a/src/apis/StyleSheet/resolveTransform.js +++ b/src/apis/StyleSheet/resolveTransform.js @@ -1,11 +1,22 @@ import normalizeValue from './normalizeValue'; -// { scale: 2 } => 'scale(2)' -// { translateX: 20 } => 'translateX(20px)' -const mapTransform = (transform) => { +// [ { perspective: 20 }, { scale: 2 }, { translateX: 20 } ] +// => { perspective: 20px, transform: 'scale(2) translateX(20px)' } +const reduceTransform = (resolvedStyle, transform) => { const type = Object.keys(transform)[0]; const value = normalizeValue(type, transform[type]); - return `${type}(${value})`; + + if (type === 'perspective') { + resolvedStyle.perspective = value; + } else { + const result = `${type}(${value})`; + if (resolvedStyle.transform) { + resolvedStyle.transform += ` ${result}`; + } else { + resolvedStyle.transform = result; + } + } + return resolvedStyle; }; // [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)' @@ -16,8 +27,7 @@ const convertTransformMatrix = (transformMatrix) => { const resolveTransform = (resolvedStyle, style) => { if (Array.isArray(style.transform)) { - const transform = style.transform.map(mapTransform).join(' '); - resolvedStyle.transform = transform; + style.transform.reduce(reduceTransform, resolvedStyle); } else if (style.transformMatrix) { const transform = convertTransformMatrix(style.transformMatrix); resolvedStyle.transform = transform;