アニメーション後の関数の呼び出しが反応ネイティブマップで終了しました

Question

region: new MapView.AnimatedRegion({ 
     longitude: 4.70821527747714, 
     latitudeDelta: 1.384276459048536, 
     latitude: 43.31340937725116, 
     longitudeDelta: 2.066803805399701, 
     }); 
.................... 
.................... 
this.state.region 
    .timing({ 
     latitude: region.latitude._value, 
     longitude: region.longitude._value, 
     latitudeDelta: 0.5, 
     longitudeDelta: 0.5, 
    }) 
    .start(); 

this.setState({ 
    zoomLevel: 8, 
    regionUpdated: true, 
}); 

これは反応ネイティブで使用したものです。

私は、アニメーションが終了した後にsetState関数を呼び出す必要があります。 今、アニメーション中に呼び出されます。

アニメーション機能が約束機能であれば素晴らしいと思います。 しかし、わかりません。

どうすればこの問題を解決できますか？

Answer 1

timing関数は、Animated値のインスタンスを返します。アニメーションのstartメソッドは、アニメーションが完了したときに呼び出される完了コールバックを受け入れます。だから、このようにそれを行うことができます。

this.state.region.timing(config).start(() => 
    this.setState({ 
    zoomLevel: 8, 
    regionUpdated: true, 
    }), 
); 

参考文献：

https://facebook.github.io/react-native/docs/animated.html#working-with-animations https://github.com/airbnb/react-native-maps/blob/master/lib/components/AnimatedRegion.js#L140

を