响应本机状态更改转换

Question

在 React Native 中，在状态更改时为组件设置动画的最佳模式是什么？

例如，我有一个元素列表，点击一个我想让它消失，而他下面的那些“起床”填补缺失的空间

我怎样才能使过渡顺利？

Answer 1

React-natives 自己的动画 API效果非常好。

基本上，您在状态中有一个值，您可以将其与样式道具连接起来，并随着时间的推移更改该值。（例如，请点击链接）

为了使用流畅的动画usenativedriver（并不总是可行），并且确保您没有在模拟/真实设备中运行调试器

编辑：2018-05-31

这是我如何使用它的一个例子。可能还存在其他方法

import { Animated, Text} from 'react-native';

class ShowCaseAnimation extends Component {

  state = { 
    animations: {
      height: new Animated.Value(0),
      fade: new Animated.Value(0),
    }
  }

  componentDidMount() {
    const { height, fade } = this.state.animations;
    if (this.props.animate) {
      doneAnimation({ height, fade }).start(() => {
        // Do stuff after animations
      });
    }
  }

  render() {
    const { animations } = this.state; 
    return (
      <Animated.View 
        style={{
          height: animate? animations.height : 300, 
          opacity: animate? animations.fade: 1,
          // other styling 
        }}
      >
        <Text> All your base are belong to us </Text>
      </Animated.View>
    );
  }
}

*完成动画：*

import { Animated, Easing } from 'react-native';

export const doneAnimation = ({ height, fade }) => Animated.parallel([
  Animated.timing(height, {
    toValue: 300,
    easing: Easing.elastic(),
    duration: 500,
    delay: 1500,
  }),
  Animated.timing(fade, {
    toValue: 1,
    easing: Easing.ease,
    duration: 1000,
    delay: 1500,
  }),
]);

export default doneAnimation;

doneAnimation将更改状态并执行所描述的动画。