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でそれらを取得できます。プロダクションビルドでpropTypeが取り除かれた場合に__DEV__がtrueの場合にのみ、これを行う必要があります