Question

我正在使用RN开发一个简单的游戏，只是想知道如何在单击对象后使其平滑消失？我最熟悉钩子，想知道如何在不使用太多“ this”或类或其他任何东西的情况下使其尽可能简单。请帮助我，我将非常感谢！：）

Answer 1

Animated方法将参数作为值并将其转换为动画值，然后我们可以使用这些值来对我们的Components进行动画处理， ****代码****

           <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>

Answer 2

您可以尝试使用react-native-animatable库。

一个解决方案：

<TouchableOpacity onPress={() => this.setState({opacity:0})}>
  <Animatable.Text transition="opacity" style={{fontSize: this.state. opacity }}>Size me up, Scotty</Animatable.Text>
</TouchableOpacity>

第二种解决方案

import * as Animatable from 'react-native-animatable';

class ExampleView extends Component {
  handleTextRef = ref => this.text = ref;

  render() {
    return (
      <TouchableWithoutFeedback onPress={() => this.text.transitionTo({ opacity: 0.2 })}>
        <Animatable.Text ref={this.handleTextRef}>Fade me!</Animatable.Text>
      </TouchableWithoutFeedback>
    );
  }
}

它具有许多配置，有关更多详细信息，您可以阅读官方的API

如何使用onPress的React Native制作简单的动画？

2 个答案: