React-Native：LayoutAnimation

Question

我正在使用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，但它似乎不支持动画弹性属性。是否真的没有人广泛使用动画API？

Answer 1

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

Answer 2

由于使用了错误的动画解决方案而导致此问题。

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

详细了解Animations Guide中的区别。

当我尝试使用flex属性为进度栏设置动画的值在0到1之间时，我了解到这种区别。

这里有一些示例代码，已编辑以删除未发布的项目特定信息……

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