reactjs - react-native-reanimated 旋转仅适用于 .map 循环内的最后一个孩子

Question

我正在使用这个库：https ://github.com/software-mansion/react-native-reanimated

我想在触摸每个元素后旋转它们。我在.map循环中创建了它。但它仅适用于最后一个元素。我希望单独对所有元素产生相同的效果。

这是我的代码：

import React, {Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

function RotationAnimation(props) {
  var rotationValue = 0;
  var rotation = useSharedValue(rotationValue);

  var animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{rotateZ: `${rotation.value}deg`}],
    };
  });

  rotateClockwise = rv => {
    var newRotationValue = parseInt(rv) * 1 + 90;
    rotation.value = withTiming(newRotationValue, {duration: 100});
    rotationValue = newRotationValue;
  };

  return (
    <TouchableOpacity onPress={() => this.rotateClockwise(rotationValue)}>
      <Animated.View
        style={[
          {
            height: 100,
            width: 100,
            backgroundColor: 'purple',
            borderColor: '#fff',
            borderWidth: 1,
          },
          animatedStyle,
        ]}>
        <Text
          style={{
            color: '#fff',
          }}>
          Code
        </Text>
      </Animated.View>
    </TouchableOpacity>
  );
}

export default class Index extends Component {
  constructor(props) {
    super(props);
  }

  renderView() {
    var count = 6;

    return [...Array(count)].map((options, key) => {
      return <RotationAnimation key={key} />;
    });
  }

  render() {
    return (
      <View>
        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          {this.renderView()}
        </View>
      </View>
    );
  }
}

这是小吃： https ://snack.expo.io/@expo_test_tan/ff5ce2

注意：但它给出了错误。哪个在avd或真实手机中正常工作。

这是问题演示：

请帮忙。提前致谢。