@xhsreds/reds-rn-next 0.8.4-fix-callbacks202510011427 → 0.8.4-image-optimization202510221852

package/lib/cjs/components/CheckBoxGroup/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var reactNative = require('react-native');
 var components_CheckBoxGroup_interface_index = require('../../_chunks/Jvjsjma1.js');
 var redsTokenNext = require('@xhsreds/reds-token-next');

package/lib/cjs/components/Collapse/Collapse.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var components_Collapse_interface_index = require('./interface/index.js');
 var components_Collapse_hooks_useCollapseContext = require('./hooks/useCollapseContext.js');

package/lib/cjs/components/Collapse/Item/Item.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_Collapse_Item_interface_index = require('./interface/index.js');

package/lib/cjs/components/Collapse/Item/styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactNative = require('react-native');
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('../../ConfigProvider/hooks/themeToken/useThemeToken.js');
-require('../../../_chunks/C9tZEm0t.js');
+require('../../../_chunks/vVKkFPW_.js');
 require('react');
 require('@xhsreds/reds-token-next');
 require('../../ConfigProvider/hooks/ConfigCache/ConfigCache.js');

package/lib/cjs/components/Collapse/index.js

@@ -2,7 +2,7 @@
 
 var components_Collapse_Collapse = require('./Collapse.js');
 var components_Collapse_Item_Item = require('./Item/Item.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('./interface/index.js');
 require('./hooks/useCollapseContext.js');

package/lib/cjs/components/ConfigProvider/ConfigProvider.js

@@ -6,7 +6,7 @@ var components_ConfigProvider_hooks_ConfigCache_ConfigCache = require('./hooks/C
 var components_ConfigProvider_hooks_ConfigContext_ConfigContext = require('./hooks/ConfigContext/ConfigContext.js');
 var React = require('react');
 var pvCount_useUnmountedProcess = require('../../pvCount/useUnmountedProcess.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 require('@xhs/reds-apm/src/index.native');
 require('../../pvCount/pvData.js');

package/lib/cjs/components/ConfigProvider/hooks/ConfigCache/ConfigCache.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../../../_chunks/vVKkFPW_.js');
 var redsTokenNext = require('@xhsreds/reds-token-next');
 
 var __defProp = Object.defineProperty;

package/lib/cjs/components/ConfigProvider/hooks/ConfigCache/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var components_ConfigProvider_hooks_ConfigCache_ConfigCache = require('./ConfigCache.js');
-require('../../../../_chunks/C9tZEm0t.js');
+require('../../../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 
 

package/lib/cjs/components/ConfigProvider/hooks/themeToken/index.js

@@ -4,7 +4,7 @@ var components_ConfigProvider_hooks_themeToken_useColorMode = require('./useColo
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('./useThemeToken.js');
 require('react');
 require('../ConfigContext/ConfigContext.js');
-require('../../../../_chunks/C9tZEm0t.js');
+require('../../../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 require('../ConfigCache/ConfigCache.js');
 

package/lib/cjs/components/ConfigProvider/hooks/themeToken/useThemeToken.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var redsTokenNext = require('@xhsreds/reds-token-next');
 var components_ConfigProvider_hooks_ConfigCache_ConfigCache = require('../ConfigCache/ConfigCache.js');

package/lib/cjs/components/ConfigProvider/index.js

@@ -7,7 +7,7 @@ var components_ConfigProvider_interface_index = require('../../_chunks/BzoUq9KD.
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('./hooks/themeToken/useThemeToken.js');
 var components_ConfigProvider_hooks_themeToken_useColorMode = require('./hooks/themeToken/useColorMode.js');
 require('./hooks/ConfigCache/ConfigCache.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 require('./hooks/ConfigContext/ConfigContext.js');
 require('react');

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var components_DatePicker_interface_index = require('../../_chunks/BiKD1VTc.js');
 var components_Picker_Picker = require('../Picker/Picker.js');

package/lib/cjs/components/DatePicker/api.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var components_DatePicker_DatePicker = require('./DatePicker.js');
 var components_DatePicker_interface_index = require('../../_chunks/BiKD1VTc.js');

package/lib/cjs/components/DatePicker/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_DatePicker_DatePicker = require('./DatePicker.js');
 var components_DatePicker_interface_index = require('../../_chunks/BiKD1VTc.js');
 var components_DatePicker_api = require('./api.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('../Picker/Picker.js');
 require('../../_chunks/PRipBqKL.js');

package/lib/cjs/components/Divider/Divider.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_Divider_interface_index = require('../../_chunks/CY-sysEj.js');

package/lib/cjs/components/Divider/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_Divider_Divider = require('./Divider.js');
 var components_Divider_interface_index = require('../../_chunks/CY-sysEj.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('react-native');
 require('./styles.js');

package/lib/cjs/components/Divider/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var reactNative = require('react-native');
 var components_Divider_interface_index = require('../../_chunks/CY-sysEj.js');
 require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');

package/lib/cjs/components/DropDown/DropDown.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');

package/lib/cjs/components/DropDown/DropDownItem.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_DropDown_interface_index = require('../../_chunks/DPBrXUej.js');

package/lib/cjs/components/DropDown/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_DropDown_DropDown = require('./DropDown.js');
 var components_DropDown_DropDownItem = require('./DropDownItem.js');
 var components_DropDown_interface_index = require('../../_chunks/DPBrXUej.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('react-native');
 require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');

package/lib/cjs/components/Empty/Empty.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_Empty_interface_index = require('../../_chunks/DMQXZWqe.js');

package/lib/cjs/components/Empty/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_Empty_Empty = require('./Empty.js');
 var components_Empty_interface_index = require('../../_chunks/DMQXZWqe.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('react-native');
 require('./styles.js');

package/lib/cjs/components/Empty/styles.js

@@ -7,7 +7,7 @@ require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');
 require('react');
 require('@xhs/reds-apm/src/index.native');
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('../ConfigProvider/hooks/themeToken/useThemeToken.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 require('../ConfigProvider/hooks/ConfigContext/ConfigContext.js');
 

package/lib/cjs/components/FAB/FAB.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_FAB_interface_index = require('../../_chunks/n-0l_8Vg.js');

package/lib/cjs/components/FAB/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_FAB_FAB = require('./FAB.js');
 var components_FAB_interface_index = require('../../_chunks/n-0l_8Vg.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('react-native');
 require('./styles.js');

package/lib/cjs/components/Form/Form.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var components_Form_interface_index = require('../../_chunks/DawXj8aA.js');
 var components_Button_Button = require('../Button/Button.js');

package/lib/cjs/components/Form/FormItem.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_Form_interface_index = require('../../_chunks/DawXj8aA.js');

package/lib/cjs/components/Form/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_Form_Form = require('./Form.js');
 var components_Form_FormItem = require('./FormItem.js');
 var components_Form_interface_index = require('../../_chunks/DawXj8aA.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('react');
 require('../Button/Button.js');
 require('react-native');

package/lib/cjs/components/Form/styles.js

@@ -8,7 +8,7 @@ require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');
 require('react');
 require('@xhs/reds-apm/src/index.native');
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('../ConfigProvider/hooks/themeToken/useThemeToken.js');
-require('../../_chunks/C9tZEm0t.js');
+require('../../_chunks/vVKkFPW_.js');
 require('@xhsreds/reds-token-next');
 require('../ConfigProvider/hooks/ConfigContext/ConfigContext.js');
 

package/lib/cjs/components/Image/Image.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
+var _rollupPluginBabelHelpers = require('../../_chunks/vVKkFPW_.js');
 var React = require('react');
 var reactNative = require('react-native');
 var components_Image_interface_index = require('../../_chunks/DBPOBx0T.js');
@@ -15,13 +15,15 @@ var redsTokenNext = require('@xhsreds/reds-token-next');
 var components_ConfigProvider_hooks_themeToken_useColorMode = require('../ConfigProvider/hooks/themeToken/useColorMode.js');
 var components_Image_utils = require('./utils.js');
 var components_Image_VisibilitySensor = require('./VisibilitySensor.js');
-var components_Image_apm = require('./apm.js');
+var components_Image_manager_ImageAPMManager = require('./manager/ImageAPMManager.js');
+var components_Image_hook_useImageId = require('./hook/useImageId.js');
 require('react-native-svg');
 require('@xhs/reds-apm/src/index.native');
 require('../../pvCount/pvData.js');
 require('../ConfigProvider/hooks/ConfigContext/ConfigContext.js');
+require('./apm.js');
 
-var _excluded = ["src", "source", "width", "height", "borderRadius", "errorStyle", "loadStyle", "style", "abortApmCollection", "fadeDuration", "onFirstDrawFinished"];
+var _excluded = ["src", "source", "width", "height", "borderRadius", "errorStyle", "loadStyle", "style", "abortApmCollection", "fadeDuration", "onFirstDrawFinished", "apmBiz"];
 var imageReLoad = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png",
   dark: "https://picasso-static.xiaohongshu.com/fe-platform/4f9bfbf2358aa970f1ec3dbf4ba5ff9355b7a41e.png",
@@ -44,8 +46,10 @@ var Image = function Image(_ref) {
     abortApmCollection = _ref.abortApmCollection,
     fadeDuration = _ref.fadeDuration,
     _onFirstDrawFinished = _ref.onFirstDrawFinished,
+    apmBiz = _ref.apmBiz,
     props = _rollupPluginBabelHelpers._objectWithoutProperties(_ref, _excluded);
   pvCount_useUnmountedProcess.default("Image");
+  var imageId = components_Image_hook_useImageId.useImageId();
   var _useState = React.useState(components_Image_interface_index.IMAGE_STATUS.LOADING),
     _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
     imageStatus = _useState2[0],
@@ -54,6 +58,14 @@ var Image = function Image(_ref) {
     _useState4 = _rollupPluginBabelHelpers._slicedToArray(_useState3, 2),
     progress = _useState4[0],
     setProgress = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers._slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setViewable = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _rollupPluginBabelHelpers._slicedToArray(_useState7, 2),
+    apmDone = _useState8[0],
+    setApmDone = _useState8[1];
   var formatSource = React.useMemo(function () {
     if (_source) return {
       uri: components_Image_utils.formatUri({
@@ -76,99 +88,26 @@ var Image = function Image(_ref) {
   var blurSource = components_Image_hook_index.useBlur({
     source: formatSource
   });
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers._slicedToArray(_useState5, 2),
-    viewable = _useState6[0],
-    setViewable = _useState6[1];
-  var hasInit = React.useRef(false);
-  var checkIsVisible = function checkIsVisible(isVisible) {
-    if (abortApmCollection) return;
-    if (!hasInit.current) {
-      hasInit.current = true;
-      apmDataRef.current.isFirstScreen = isVisible ? "true" : "false";
-    }
-    setViewable(isVisible);
-  };
-  var apmDataRef = React.useRef({
-    imageUrl: "",
-    imageHost: "",
-    intersectTime: viewable ? Date.now() : 0,
-    imageSize: 0,
-    isFirstScreen: "false",
-    isPrefetch: "",
-    isSuccess: "false",
-    errorReason: "",
-    loadedStartTime: 0,
-    loadedTime: 0,
-    loadDuration: 0,
-    viewDuration: 0
-  });
-  var _useState7 = React.useState(false),
-    _useState8 = _rollupPluginBabelHelpers._slicedToArray(_useState7, 2),
-    apmDoneRef = _useState8[0],
-    setApmDoneRef = _useState8[1];
   React.useEffect(function () {
     if (abortApmCollection) return;
-    try {
-      var apmData = apmDataRef.current;
-      if (typeof formatSource !== "number" && !components_Image_utils.isLocalFile(formatSource.uri) && !components_Image_utils.isDataUri(formatSource.uri)) {
-        var imageUrl = new URL(formatSource.uri);
-        apmData.imageHost = "".concat(imageUrl.protocol, "//").concat(imageUrl.host);
-        apmData.imageUrl = formatSource.uri;
-      }
-    } catch (error) {}
-  }, [formatSource, abortApmCollection]);
-  React.useEffect(function () {
-    if (abortApmCollection) return;
-    var imageUrl = (formatSource === null || formatSource === void 0 ? void 0 : formatSource.uri) || "";
-    if (typeof reactNative.Image.queryCache === "function" && !!imageUrl) {
-      var uriEncodeImageUrl = encodeURI(imageUrl);
-      reactNative.Image.queryCache([imageUrl]).then(function (res) {
-        if (res !== null && res !== void 0 && res[uriEncodeImageUrl]) {
-          apmDataRef.current.isPrefetch = "true";
-        } else {
-          apmDataRef.current.isPrefetch = "false";
-        }
-      });
-    }
+    var manager = components_Image_manager_ImageAPMManager.default.getInstance();
+    manager.register(imageId, formatSource, apmBiz);
     return function () {
-      apmDataRef.current.isPrefetch = "";
+      return manager.unregister(imageId);
     };
-  }, [formatSource, abortApmCollection]);
-  var pushApmData = React.useCallback(function () {
-    if (abortApmCollection) return;
-    var apmData = apmDataRef.current;
-    var viewDuration = apmData.loadedTime - apmData.intersectTime;
-    apmData.viewDuration = viewDuration < 0 ? 0 : viewDuration;
-    var imageSize = apmDataRef.current.imageSize || 0;
-    if (!apmDataRef.current.isPrefetch) {
-      apmDataRef.current.isPrefetch = String((imageSize || 0) <= 0);
-    }
-    if (!apmDoneRef && apmData.imageUrl && !abortApmCollection) {
-      setApmDoneRef(true);
-      components_Image_apm.apmPush(components_Image_utils.convertKeysToSnakeCase(apmData));
-    }
-  }, [abortApmCollection]);
-  if ((!apmDataRef.current.isFirstScreen || apmDataRef.current.isFirstScreen === "false") && viewable && !abortApmCollection) {
-    apmDataRef.current.isFirstScreen = "true";
-  }
+  }, [imageId, abortApmCollection, apmBiz]);
   React.useEffect(function () {
     if (abortApmCollection) return;
-    var apmData = apmDataRef.current;
-    if (!apmData.intersectTime && viewable) {
-      apmData.intersectTime = Date.now();
-      if (apmData.loadedTime || apmData.errorReason) {
-        pushApmData();
-      }
-    }
-  }, [viewable, pushApmData, abortApmCollection]);
-  var onLoadEnd = function onLoadEnd() {
-    var _props$onLoadEnd;
-    props === null || props === void 0 || (_props$onLoadEnd = props.onLoadEnd) === null || _props$onLoadEnd === void 0 || _props$onLoadEnd.call(props);
+    components_Image_manager_ImageAPMManager.default.getInstance().updateSource(imageId, formatSource);
+  }, [formatSource, abortApmCollection, imageId]);
+  var checkIsVisible = function checkIsVisible(isVisible) {
     if (abortApmCollection) return;
-    var apmData = apmDataRef.current;
-    if (apmData.intersectTime) {
-      pushApmData();
+    components_Image_manager_ImageAPMManager.default.getInstance().setViewable(imageId, isVisible);
+    setViewable(isVisible);
+  };
+  var onLoadStart = function onLoadStart() {
+    if (!abortApmCollection) {
+      components_Image_manager_ImageAPMManager.default.getInstance().recordLoadStart(imageId);
     }
   };
   var onProgress = function onProgress(e) {
@@ -179,33 +118,35 @@ var Image = function Image(_ref) {
     if (total) {
       setProgress(loaded / total * 100 | 0);
     }
-    !abortApmCollection && (apmDataRef.current.imageSize = total);
+    if (!abortApmCollection) {
+      components_Image_manager_ImageAPMManager.default.getInstance().recordProgress(imageId, loaded, total);
+    }
     (_props$onProgress = props.onProgress) === null || _props$onProgress === void 0 || _props$onProgress.call(props, e);
   };
   var onLoad = function onLoad(e) {
     var _props$onLoad;
     if (!abortApmCollection) {
-      var now = Date.now();
-      var loadDuration = now - apmDataRef.current.loadedStartTime;
-      apmDataRef.current.loadedTime = now;
-      apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
-      apmDataRef.current.isSuccess = "true";
+      components_Image_manager_ImageAPMManager.default.getInstance().recordLoad(imageId);
     }
     (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, e);
     setImageStatus(components_Image_interface_index.IMAGE_STATUS.LOADED);
   };
-  var onLoadStart = function onLoadStart() {
-    !abortApmCollection && (apmDataRef.current.loadedStartTime = Date.now());
-  };
   var onError = function onError(e) {
     var _props$onError;
     if (!abortApmCollection) {
-      apmDataRef.current.isSuccess = "false";
-      apmDataRef.current.errorReason = "".concat(e.nativeEvent.error);
+      components_Image_manager_ImageAPMManager.default.getInstance().recordError(imageId, "".concat(e.nativeEvent.error));
     }
     (_props$onError = props.onError) === null || _props$onError === void 0 || _props$onError.call(props, e);
     setImageStatus(errorStyle === components_Image_interface_index.TErrorStyle.ERROR ? components_Image_interface_index.IMAGE_STATUS.LOADERROR : components_Image_interface_index.IMAGE_STATUS.RELOAD);
   };
+  var onLoadEnd = function onLoadEnd() {
+    var _props$onLoadEnd;
+    if (!abortApmCollection) {
+      components_Image_manager_ImageAPMManager.default.getInstance().checkAndPush(imageId);
+      setApmDone(true);
+    }
+    props === null || props === void 0 || (_props$onLoadEnd = props.onLoadEnd) === null || _props$onLoadEnd === void 0 || _props$onLoadEnd.call(props);
+  };
   var onReload = function onReload(e) {
     var _props$onReload;
     setImageStatus(components_Image_interface_index.IMAGE_STATUS.HIDE);
@@ -223,7 +164,7 @@ var Image = function Image(_ref) {
     }, style)
   }, imageStatus !== components_Image_interface_index.IMAGE_STATUS.HIDE && (!abortApmCollection ? /* @__PURE__ */React.createElement(components_Image_VisibilitySensor.default, {
     onChange: checkIsVisible,
-    disabled: apmDoneRef
+    disabled: apmDone
   }, /* @__PURE__ */React.createElement(reactNative.Image, _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, props), {}, {
     source: formatSource,
     onLoadStart: onLoadStart,