如何从函数启动 React-Native-Animatable 动画？

Question

我刚刚开始学习 React-Native 的 Animatable 库，不知道如何从函数启动动画。

例如，我有：

<Animatable.View animation={custom1}>
    <View style={styles.itemOne}>
       <Text>Hello World</Text>
    </View>
</Animatable.View>

和

   const custom1 = {
      0: {
        scale: 15,
      },
      1: {
        scale: 1,
      }
    }

当然，当页面加载时，我的“custom1”动画会立即在视图上执行。

但是，如果我不希望 `"custom1" 动画在 'call it' 之前执行（而不是在页面加载时）怎么办？例如，如果我想做什么：

function initiateCustom1() {
   custom1.animate()
}

我该如何完成？

Answer 1

我以为你正在使用这个 library?

如果是，那么您可以使用 ref prop.

<Animatable.View
  animation='zoomInUp'
  ref={ref => {
    this.sample = ref;
  }}
>
  <Text>Sample</Text>
</Animatable.View>

在您的触摸屏或按钮上

onPress={() => {
  this.sample.zoomOutDown();
  // or
  this.sample.zoomOutDown().then(() => {
    // do something after animation ends
  });
}}

How to initiate a React-Native-Animatable animation from a function?