在 React Native 中道具改变（通过 redux）时如何启动动画？

Question

我的 React Native 应用程序中有一个叠加视图，我需要在用户按下按钮时在屏幕上和屏幕外设置动画。我知道如何定位视图并为其设置动画，但我不知道如何触发动画。

我的 redux 商店有一个非常简单的状态，带有一个 isOpen 标志，说明面板是打开还是关闭。我将状态映射到面板组件的道具，当 isOpen 道具发生变化时，我想触发打开或关闭动画。显然，如果用户在动画中间按下切换按钮，则需要取消当前运行动画。

这应该很简单，但我找不到任何示例。任何帮助将不胜感激。

Answer 1

React Native

要在 props 的变化上开始动画，您可以简单地 start 在 componentDidUpdate 中制作动画。这是一个例子：

componentDidUpdate(prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
        this.state.animation.start();
    }
}

假设您的动画是在组件的状态中定义的。

React（浏览器）:

[与这个问题无关但可能有用。]

一个简单的方法是使用 CSS 转换。你可以做的是给面板组件一个 CSS class for closed （或 open 但我发现使用 closed/collapsed 作为样式更容易，因为这样默认是打开的）。

然后在面板的渲染中：

render() {
    const { isOpen } = this.props;

    return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}

在你的 CSS 中：

.panel {
    /* some other styles */
    transition: .5s ease-in;
}

.closed {
    height: 0;
}

这样 CSS 可以处理动画逻辑，解决了您在当前动画完成之前单击 open/close 按钮的问题。

以下是 CSS 转换文档：https://developer.mozilla.org/en-US/docs/Web/CSS/transition

编辑: 这种方法的缺点是打开面板时必须明确设置高度。

这是一个小示例片段：

function togglePanel() {
  const panel = document.querySelector('div.panel');
  if (panel.classList.contains('closed')) {
    panel.classList.remove('closed');
  } else {
    panel.classList.add('closed');
  }
}

.panel {
  background-color: #00c0de;
  height: 4rem;
  overflow: hidden;
  transition: .5s ease-in;
}

.closed {
  height: 0;
}

<button onclick='togglePanel()'>Toggle Panel</button>

<div class='panel closed'>
  <span>Hello, I'm the panel</span>
</div>

在 React Native 中道具改变（通过 redux）时如何启动动画？

How to start animation when props change (via redux) in React Native?

reactjs

react-native

redux

react-redux

react-animated