在React Native中的图像顶部创建旋转的文本横幅(梯形)

import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';

class RotatingBanner extends Component {
  constructor(props) {
    super(props);
    this.rotationValue = new Animated.Value(0);
  }

  componentDidMount() {
    this.startRotation();
  }

  startRotation() {
    Animated.loop(
      Animated.timing(this.rotationValue, {
        toValue: 1,
        duration: 5000,
        useNativeDriver: true,
      })
    ).start();
  }

  render() {
    const rotate = this.rotationValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });

    return (
      <View style={{ flex: 1 }}>
        <Animated.View
          style={{
            transform: [{ rotate }],
            backgroundColor: 'blue',
            padding: 10,
          }}
        >
          <Text style={{ color: 'white', fontSize: 16 }}>
            Rotating Banner Text
          </Text>
        </Animated.View>
      </View>
    );
  }
}

export default RotatingBanner;