react-native：禁用动画

问题描述：

我们正在使用Animated和react-native-animatable，并且在一些旧设备上开始发现缓慢。所有动画设置为useNativeDriver，这使我们相信我们可能会有一些太多的动画。react-native：禁用动画

有没有办法覆盖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} /> 
    ) 
    } 

}

答

只需为它创建一个包装组件和使用，而不是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__为真时，您可能需要执行此操作，因为在生产版本中删除了propTypes

react-native：禁用动画

相关推荐