如何使用Reanimated分别为组件设置动画

Question

在该代码上，当我按下映射数组中的一个项目时，所有项目的不透明度都会改变。我不知道如何进行个人更改。

因此，如果我单击一个，则只是被单击元素的不透明度会发生变化。

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

            const state = new Value(-1);

            this.onStateChange = event([
                  {
                        nativeEvent: {
                              state: state
                        }
                  }
            ]);

            this._opacity = cond(eq(state, State.BEGAN), 0.2, 1);
      }

      render() {
            const data = [0, 1, 2];
            return (
                  <View style={styles.container}>
                        <TapGestureHandler onHandlerStateChange={this.onStateChange}>
                              <Animated.View>
                                    {data.map((item, index) => {
                                          <Animated.View
                                                key={index}
                                                style={[styles.box, { opacity: this._opacity }]}
                                          />;
                                    })}
                              </Animated.View>
                        </TapGestureHandler>
                  </View>
            );
      }
}