ネイティブAnimated.springがスムーズに反応しません

Question

私はリアクションのネイティブアニメーションAPIを使用して、左から右の位置にスムーズに移行します。 これは私の初期状態

constructor(props) { 
     super(props); 
     this.state = { 
      isDrawerOpened: false, 
      left: new Animated.Value(-100) 
     }; 
     this.setDrawer = this.setDrawer.bind(this); 
    } 

componentDidMountが

componentDidMount() { 
     Animated.spring(this.state.left, {toValue: 200}).start(); 
    } 

を呼び出したときには、まだ細かい作業しかしi'amは（もアニメーションを開始する）状態を変更するには、イベントを使用した場合です。遷移が粗くなる（滑らかではない）。 この誰もがこの:(を解決することができ、私のイベントコード

setDrawer() { 
     this.setState({ 
      isDrawerOpened: !this.state.isDrawerOpened 
     }); 

     if (this.state.isDrawerOpened) { 
      this.setState({ 
       left: new Animated.Value(200) 
      }); 
      Animated.spring(this.state.left, {toValue: -100, speed: 1000}).start(); 
     } else { 
      this.setState({ 
       left: new Animated.Value(-100) 
      }); 
      Animated.spring(this.state.left, {toValue: 200, speed: 1000}).start(); 
     } 
    } 

で、私の悪い英語のため申し訳ありません

Answer 1

がuseNativeDriver: trueのために行くしてください。あなたのアニメーションは、今JSのスレッドで実行され、他のものによってブロックされる可能性がありますあなたのJSコードで起こっている。これは、UIスレッドにアニメーションを移動します。

を参考のためにdocsを参照してください。