如何在React Native中的两个颜色动画循环之间平滑过渡？

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

class ColorAnimation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: new Animated.Value(0), // 第一个颜色的动画值
      color2: new Animated.Value(0), // 第二个颜色的动画值
    };
  }

  componentDidMount() {
    this.startAnimation();
  }

  startAnimation() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(this.state.color1, {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: false,
        }),
        Animated.timing(this.state.color2, {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: false,
        }),
        Animated.timing(this.state.color1, {
          toValue: 0,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: false,
        }),
        Animated.timing(this.state.color2, {
          toValue: 0,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: false,
        }),
      ])
    ).start();
  }

  render() {
    const color1 = this.state.color1.interpolate({
      inputRange: [0, 1],
      outputRange: ['red', 'blue'],
    });

    const color2 = this.state.color2.interpolate({
      inputRange: [0, 1],
      outputRange: ['blue', 'green'],
    });

    return (
      <Animated.View
        style={{
          flex: 1,
          backgroundColor: color1,
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Animated.Text style={{ color: color2 }}>Hello, World!</Animated.Text>
      </Animated.View>
    );
  }
}

export default ColorAnimation;