如何在外部组件调用中运行Animated.Spring

Question

我正在尝试从父组件调用 Animated.Spring 而函数不是运行宁。你如何解决这个问题？

它在组件内有效，但从外部调用时无效。我正在使用警报来显示函数代码执行运行但由于某种原因它会跳过动画调用。

这是我的代码：

import React, { Component } from 'react'
import { View, Animated, Button, Easing } from 'react-native'

export default class App extends Component {
  handlerSimpleCall = () => {
    //Calling a function of other class (without arguments)
    new Alerts().handleAnimation();
  };

  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}>
        <Alerts />
        <View style={{ margin: 10 }}>
          <Button
            title="Function Without Argument"
            onPress={this.handlerSimpleCall}
            color="#606070"
          />
        </View>
      </View>
    );
  }
}

class Alerts extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1)
  }

  handleAnimation = () => {
    this.animatedValue.setValue(0)
    alert("ASD")
    Animated.spring(this.animatedValue, {
      toValue: 1,
      useNativeDriver: true,
      friction: 1
    }).start()
  }
  render() {
    return (
      <View style={{ height: '100%', width: '100%', justifyContent: "center", alignItems: "center" }}>
        <Animated.View style={{ height: 150, width: 150, backgroundColor: 'red', transform: [{ scale: this.animatedValue }] }} />
        <View style={{ width: 100, marginTop: 20 }}>
          <Button onPress={this.handleAnimation} title='Press Me' />
        </View>
      </View>
    )
  }
}

Answer 1

您应该 use a ref 引用您的组件，而不是创建一个 new Alerts()。

我能够让它像这样工作：

import React, { Component } from 'react'
import { View, Animated, Button, Easing } from 'react-native'

export default class App extends Component {
    constructor(props) {
    super(props);
    this.alertRef = React.createRef();
  }

  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}>
        <Alerts
          ref={this.alertRef}
        />
        <View style={{ margin: 10 }}>
          <Button
            
            title="Function Without Argument"
            onPress={() => this.alertRef.current.handleAnimation()}
            color="#606070"
          />
        </View>
      </View>
    );
  }
}

class Alerts extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1)
  }

  handleAnimation = () => {
    this.animatedValue.setValue(0)
    alert("ASD")
    Animated.spring(this.animatedValue, {
      toValue: 1,
      useNativeDriver: true,
      friction: 1
    }).start()
  }
  render() {
    return (
      <View style={{ height: '100%', width: '100%', justifyContent: "center", alignItems: "center" }}>
        <Animated.View style={{ height: 150, width: 150, backgroundColor: 'red', transform: [{ scale: this.animatedValue }] }} />
        <View style={{ width: 100, marginTop: 20 }}>
          <Button onPress={this.handleAnimation} title='Press Me' />
        </View>
      </View>
    )
  }
}

如何在外部组件调用中运行Animated.Spring

How to run Animated.Spring in external component call

reactjs

react-native

react-animated