javascript - 如何使用带有 onPress 的 React Native 制作简单的动画？

Question

我正在使用 RN 开发一个简单的游戏，只是想知道如何让一个对象在我点击它后平滑消失？我主要熟悉钩子(Hook)，想知道如何在不使用太多“this”或类或其他任何东西的情况下使其尽可能简单。 请帮助我，我将不胜感激! :)

Answer 1

Animated 方法将参数作为值并将这些值转换为动画值，然后我们可以使用这些值来为我们的组件设置动画:

<View style={styles.container}>
  <TouchableOpacity style={styles.btn} onPress={() =>this._start()}>
    <Text style={styles.textBtn}>Start</Text>
  </TouchableOpacity>
  <Animated.View
    style={{
      opacity: this.state.fadeValue,
      height: 250,
      width: 200,
      margin: 5,
      borderRadius: 12,
      backgroundColor: "#347a2a",
      justifyContent: "center"
    }}
  >
    <Text style={styles.text}>Fade </Text>
  </Animated.View>
</View>