reagieren native: deaktivieren Animationen

Question

Wir verwenden Animated und react-native-animatable ziemlich schwer und langsam auf einigen alten Geräten zu erkennen, Langsamkeit. Alle Animationen setzen useNativeDriver, was uns glauben lässt, dass wir vielleicht ein paar zu viele Animationen haben.

Gibt es eine Möglichkeit, den Animated Prototyp zu überschreiben, um Animationen vollständig zu deaktivieren? Ich schaute mir das an und es schien nicht einfach zu sein.

Eine weitere Option, die ich in Betracht ziehe, ist, meine Fade-Animationen zu belassen, aber den Anfangswert in constructor auf den endgültigen Wert zu setzen. Dieser Ansatz zeigt definitiv keine Animationen, aber würde er auch die Animation in der nativen Bridge umgehen, da sich der Wert nicht ändert?

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

nur eine Verpackungskomponente für sie erstellen und verwenden, die anstelle von Animated.View

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

Sie könnten die Requisiten filtern müssen Sie da View erhalten hat nicht viele der Requisiten, die Animated.View hat . Sie können sie über View.propTypes abrufen. Möglicherweise müssen Sie dies nur tun, wenn __DEV__ wahr ist, da propTypes in Produktionsaufbauten entfernt werden