動畫結束後的調用函數結束於react-native-maps

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, 
}); 

這就是我在react-native中使用的。

我想在動畫結束後調用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