React-Native：禁用动画

Question

我们正在大量使用Animatedandreact-native-animatable并开始注意到一些旧设备上的速度缓慢。所有动画设置useNativeDriver让我们相信我们可能有太多动画。

有没有办法覆盖Animated原型以完全禁用动画？我查了一下，发现事情并不简单。

我正在考虑的另一个选择是保留淡入淡出动画，但将初始值设置为 constructor 最终值。这种方法肯定不会显示任何动画，但它是否也会绕过本机桥中的动画，因为值没有改变？

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 1 // Notice how this is set to 1
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({opacity: 1})
    }, 1000)
  }


  render() {
    return (
      <Animatable.View style={{opacity}} easing='ease-in' transition='opacity' duration={500} useNativeDriver={true} />
    )
  }

}

Answer 1

只需为其创建一个包装组件并使用它来代替 Animated.View

export default const AnimatedViewWrapper = (props) => {
   if (/* slow device check */) {
      return React.createElement(View, props)
   } else {
      return React.createElement(Animated.View, props)
   }
}

您可能需要过滤收到的道具，因为View拥有的道具并不多Animated.View。您可以通过 View.propTypes 获取它们。仅当为 true 时，您可能才需要执行此操作__DEV__，因为 propTypes 在生产版本中被删除