7

一部のコンポーネントのレイアウト アニメーションを有効にしたいのですが、有効にすると、レンダリングされるすべてのコンポーネントがレイアウト アニメーションの影響を受けます。たとえば、私は

<container>
  <waterfall/>
  <menu/>
</container>

コンポーネント メニューにレイアウト アニメーションのみを使用したいのですが、アニメーションは、独自のアニメーション コードを既に持っているウォーターフォール レンダリングに適用されます。

これは反応ネイティブで可能ですか?

4

3 に答える 3

3

私は同様の問題に遭遇しました。これが私がそれを解決した方法ですlayoutanimation:

説明

プロパティとしてメニューに渡されるコンテナ コンポーネントに状態変数を保持します。<menu reload={this.state.doSomethingInMenu}>

コンテナー コンポーネントで、 を使用setTimeoutしてメニュー変数を設定し、制御が DOM に戻され、変更が (アニメーションなしで) レンダリングされるようにします。setTimeout が実行された後、変数が更新され、メニュー プロパティが変更され、再読み込みが発生します。

メニュー コンポーネントで、その変数が期待する値に更新されているかどうかを確認します。ある場合は、 に電話してLayoutAnimation.configureNextください。これにより、次のレンダリング (メニューの変更のみ) がアニメーション化されます。

コードの概要

コンテナ コンポーネント

getInitialState: function() {
  return { doSomethingInMenu: false };
},

// Do something that causes the change
// Then call setTimeout to change the state variable
setTimeout(() => {
  this.setState({ doSomethingInMenu: true });
},750)

<menu reload={this.state.doSomethingInMenu} />

メニュー コンポーネント

componentWillReceiveProps: function(nextProps) {
    if (nextProps.reload) {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      // Set the menu state variable that causes the update
      this.setState({field: value})
    }
  },
于 2016-11-25T01:14:37.980 に答える