动画在react-native-maps结束后调用函数

时间:2017-10-06 13:05:42

标签: ios reactjs react-native react-native-ios react-native-maps

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函数。 但是现在,它在动画中被调用了。

我认为如果动画功能是承诺功能会很棒。 但我不确定。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:4)

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