React-Native：布局动画答案

【问题标题】：React-Native: LayoutAnimationReact-Native：布局动画
【发布时间】：2017-03-22 12:44:09
【问题描述】：

我正在使用 react-native 的 LayoutAnimation 来实现自定义开关组件。

我正在使用 LayoutAnimation 为圆的运动设置动画，如下所示：

componentWillUpdate() {
  let switchAnimation = {
    duration: 250,
     update: {
       type: LayoutAnimation.Types.linear,
       property: LayoutAnimation.Properties.opacity,
     },
  };
  LayoutAnimation.configureNext(switchAnimation);
}

开关是它自己的组件。它使用 css（justifyContent flex-start 或 flex-end）接收道具来将圆圈设置在左侧或右侧

在我看来问题是当开关改变值时其他组件也改变：即当开关被按下时：

1) 开关变化

2) 图标发生变化

3) 一些文字改动

以上所有动画。我想减少动画只影响开关

更新：我尝试过使用动画 API，但它似乎不支持动画 flex 属性。真的没有人广泛使用 The Animated API 吗？

【问题讨论】：

LayoutAnimation 在这里不是正确的方法。考虑使用动画 API facebook.github.io/react-native/docs/animations.html
文档中的示例使用组件状态。在我的情况下这将如何运作？我应该将道具映射到状态变量并从那里创建动画吗？
我已经用一个示例更新了我的答案，其中包括使用带有 flex 属性的动画 API。

标签： react-native

【解决方案1】：

LayoutAnimation 在后台做了很多工作。除非您愿意查看源，否则您可以设置和更改边距值以移动容器中的圆圈。您可以在组件内进行所有计算并将一些样式公开为道具。

【讨论】：

谢谢。似乎是唯一可行的解决方案

【解决方案2】：

这个问题是因为使用了错误的动画解决方案。

要为特定元素设置动画，请使用Animated API，而不是LayoutAnimation API。

详细了解Animations Guide 中的差异。

我在尝试使用值在 0 到 1 范围内的 flex 属性为进度条设置动画时发现了这种差异。

这是一些示例代码，经过编辑以删除不相关的项目细节……

import React from 'react'
import { Animated, View } from 'react-native'
const progressStyles = {
  height: 10,
  backgroundColor: 'blue',
}
class PasswordStrengthMeter extends React.Component {
  state = {
    width: new Animated.Value(0), // value in the range 0–1
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.score !== this.props.score) {
      Animated.timing(this.state.width, {
        toValue: nextProps.score / 4, // score will be a value between 0-4
        duration: 500,
      }).start()
    }
  }
  render() {
    return (
      <View>
        <Animated.View
          style={[
            progressStyles,
            {
              flex: this.state.width, // value in the range 0–1
            },
          ]}
        />
      </View>
    )
  }
}

【讨论】：