React Native Transform Origin

问题

how do I apply the transform-origin property to a style in react native? I've tried in several ways, but I did not get an event

I tried:

transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ]

回答1:

React native doesn't have any transform origin property yet. maybe in future

so to achieve this 🐈🐈🐈🐈

you should try to use translateX or translateY trick for example to rotate a shape 35 deg from left most

transform: [

            {   
                translateX: -1 * (widthOfShape / 2)

            }
            },

            {
                rotate: '35deg'
            },
            {   
                translateX: (widthOfShape / 2)

            },
        ]

be careful after rotation is done you should translate it back to it's orginal position

回答2:

I have made a lib to achieve transform-origin. react-native-anchor-point

easy to use

import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0, y: 0.5 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};

<Animated.View style={[styles.blockBlue, this.getTransform()]} />

来源：https://stackoverflow.com/questions/52561376/react-native-transform-origin