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

以下是一个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,
  },
});

这段代码实现了图片放大和旋转的基本功能，并在组件挂载后开始动画。它使用了Animated API来处理动画，并通过useNativeDriver: true选项使用了原生驱动以提升性能。