react-native：禁用动画

发布时间：2020-12-15 09:36:27 所属栏目：百科来源：网络整理

导读：我们正在使用Animated和react-native-animatable,并开始注意到某些旧设备的速度缓慢.所有动画都设置了useNativeDriver,这让我们相信我们可能会有太多的动画. 有没有办法覆盖Animated原型来完全禁用动画？我调查了这个并不简单. 我正在考虑的另一个选项是保留

我们正在使用Animated和react-native-animatable,并开始注意到某些旧设备的速度缓慢.所有动画都设置了useNativeDriver,这让我们相信我们可能会有太多的动画.

有没有办法覆盖Animated原型来完全禁用动画？我调查了这个并不简单.

我正在考虑的另一个选项是保留我的淡入淡出动画,但是将构造函数中的初始值设置为最终值.这种方法绝对不会显示任何动画,但它还会绕过原生桥中的动画,因为值没有变化？

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

}

解决方法

只需为它创建一个包装组件,然后使用它而不是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获取它们.如果__DEV__为true,则可能需要执行此操作,因为propTypes在生产版本中被删除

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!