14
：ネイティブリアクト：アニメーションを私は<code>componentDidMount</code>時におけるスライドカスタムモーダルを持っている場合に、コンポーネントアンマウント
componentDidMount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: 0
}).start()
}
[OK]を、これは簡単でした。しかし、私はまた、コンポーネントがアンマウントするときにモーダルをスライドさせたい。私は私のアニメーションが終了するまで待つdoesntの反応するので、
componentWillUnmount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: deviceHeight
}).start()
}
しかし、これはもちろんない仕事で行います。それは、エレガントな宣言的な方法であるとして私のために、componentWillUnmount()は、右感じるだろう。
だから現在私は、カスタム関数でこれを回避する：
closeModal() {
Animated.timing(this._animatedValue.y, {
duration: C.filterModalDuration,
toValue: deviceHeight
}).start()
InteractionManager.runAfterInteractions(() => {
this.props.UnmountThisComponent()
})
}
これはもちろんとしてエレガントではありませんが、それは動作します。しかし、痛みは私はコンポーネントツリーに遠くダウンコンポーネントからこの関数を呼び出す必要がある場合、つまり、私は手動で再びonUnmount={()=> closeModal()}を経由して、onUnmount={this.props.onUnmount}と何度もこの機能を伝承する必要が開始されます...
次にI私はredux & redux-connectでこれを解決できると考えました。しかし、これはかなりハックと不可欠な感じ
componentWillReceiveProps (nextProps) {
if (nextProps.closeFilter === true) {
this.closeModal()
}
}
：私は、このようなcomponentWillRecieveProps()を経由して関数を呼び出します子コンポーネントからReduxの状態変化をトリガするために考えていました。
エレガントな/宣言的な方法でこの問題を解決する方法はありますか？
これに関するアップデートはありますか？私は今この同じ状況にいる。私はこのInteractionManagerなどが何であるかわからないので、アップデートがあなたのコード解説のビットをもっと広げることができないならば：D –
私の側からの更新はありません。対話マネージャは、アニメーションが完了した後、最初にコールバックを実行します。通常は、そのコールバック内に高価な同期タスクを配置します。アニメーションと高価なタスクを同時に実行すると、アニメーションはジャッキーになります。 （最近のバージョンのreactネイティブでリリースされたアニメーション用のネイティブドライバを使用しない限り、アニメーションは別のスレッドで実行されます）。詳細はこちら：https://facebook.github.io/react-native/docs/interactionmanager.html – ThorbenA
プロジェクトで 'Navigator'を使用していますか？それで、私たちは入力/終了ビューでアニメーションを（トランジションで）行います。 – Lucas