动画结束后的调用函数结束于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