react native实现两个方块并行的动画的代码

以下是一个使用 React Native 实现两个方块并行动画的示例代码：

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

export default class ParallelAnimations extends Component {
  constructor(props) {
    super(props);
    this.state = {
      box1Animation: new Animated.Value(0),
      box2Animation: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.parallel([
      Animated.timing(this.state.box1Animation, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.box2Animation, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
    ]).start();
  }

  render() {
    const box1Transform = this.state.box1Animation.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 150],
    });
    const box2Transform = this.state.box2Animation.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 150],
    });
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <Animated.View
          style={{
            backgroundColor: 'red',
            width: 50,
            height: 50,
            transform: [{ translateX: box1Transform }],
          }}
        />
        <Animated.View
          style={{
            backgroundColor: 'blue',
            width: 50,
            height: 50,
            transform: [{ translateX: box2Transform }],
          }}
        />
      </View>
    );
  }
}

这个示例代码实现了两个方块的并行动画，它们向右移动。使用了`Animated` API 来实现动画。`componentDidMount`生命周期方法会在组件挂载后自动调用，使用`Animated.parallel`方法并行启动两个动画。`interpolate`方法用于将动画值映射到组件属性上。最后，我们在渲染方法中使用带有`translateX`变换的`Animated.View`组件来渲染方块。