动画不适用于复活的API

Question

在那些日子里，我一直试图将React-Native-Reanimated集成到我自己的应用程序中，但我对动画的很多事情一无所知。通过运行复活的GitHub文档的一些示例，我发现其中一些示例对我而言并不适用。我已经能够解决这个示例，将动画值保存在状态中

但是我有一个疑问，因为评估Internet上的示例和一些代码示例后，我发现使用Class Components不需要更新state上的值，否则直接在“ Value”对象上更新值将触发动画（然后重新渲染）。但这对我不起作用，我没有其他工作方式，仅当我将Value对象保存在状态上，然后在想要更改动画值时更新状态时，对我有用。

我做错了吗？

class ListAddressComponent extends React.Component {
  state = {
    modalVisible: false,
  }

  value = new Animated.Value(1);

  animate = (clock, value, dest) => {
    const state = {
      time: new Value(0),
      finished: new Value(0),
      velocity: new Value(0),
      position: new Value(0),
    };

    const config = {
      toValue: new Value(0),
      damping: 50,
      mass: 1,
      stiffness: 100,
      overshootClamping: false,
      restSpeedThreshold: 0.001,
      restDisplacementThreshold: 0.001,
    };

    return block([
      cond(clockRunning(clock), 0, [
        set(state.finished, 0),
        set(state.time, 0),
        set(state.position, value),
        set(state.velocity, 500),
        set(config.toValue, dest),
        startClock(clock),
      ]),
      spring(clock, state, config),
      cond(state.finished, stopClock(clock)),
      // state.position
      set(this.value, state.position)
    ]);
  }

  componentDidUpdate(prevProps) {
    // update the modal visible state on props change
    if (prevProps.visible !== this.props.visible) {
      this.setState({
        modalVisible: this.props.visible,
      }, () => {
        const clock = new Clock();
        this.animate(clock, 1, 300);
      });
    }
  }

  onCloseModal = () => {
    const clock = new Clock();
    this.animate(clock, 300, 1);
    setTimeout(() => {
      this.setState({ modalVisible: false });
      this.props.onClose && this.props.onClose('LIST');
    }, 500);
  }

  render() {
    return <Modal
      transparent
      animationType="fade"
      visible={this.state.modalVisible}
      onRequestClose={this.onCloseModal}
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={this.onCloseModal}
        style={{ backgroundColor: 'rgba(0, 0, 0, 0.4)', flex: 1, justifyContent: 'flex-end' }}
      >
        <Animated.View
          activeOpacity={1}
          style={[Style.backdrop, { height: this.value }]}
        >
          <View>
            { this.renderTitle() }
            <View style={{ marginBottom: scale(20) }}>
              { this.renderActualAddress() }
              { this.renderAddress() }
            </View>
            { this.renderAddNewAddress() }
          </View>
        </Animated.View>
      </TouchableOpacity>
    </Modal>
  }
}