react-native：禁用動畫

Question

我們正在使用Animated和react-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獲取它們。只有當__DEV__爲真時，您可能需要執行此操作，因爲在生產版本中刪除了propTypes