基于react native的图片放大旋转效果二

import React from 'react';
import { Animated, Image, StyleSheet, View } from 'react-native';

export default class ZoomRotateImage extends React.Component {
  state = {
    zoomAnim: new Animated.Value(1),
    rotateAnim: new Animated.Value(0),
  };

  componentDidMount() {
    Animated.timing(this.state.zoomAnim, {
      toValue: 2,
      duration: 500,
      useNativeDriver: true,
    }).start();

    Animated.timing(this.state.rotateAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    const imageStyle = {
      transform: [
        { scale: this.state.zoomAnim },
        { rotate: this.state.rotateAnim.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
          })
        }
      ]
    };

    return (
      <View style={styles.container}>
        <Image style={[styles.image, imageStyle]} source={{ uri: this.props.imageUrl }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});