애니메이션 이후의 함수 호출이 반응식 네이티브 맵에서 끝났습니다.

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