@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-beta202510271511

package/src/components/Form/demo/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Text, ScrollView, View } from "react-native";
+import { Text, ScrollView, View, TouchableWithoutFeedback } from "react-native";
 import {
   Form,
   FormItem,
@@ -15,10 +15,14 @@ import {
   TextField,
   Icon,
   Image,
+  Picker,
+  useThemeColor,
+  Uploader,
 } from "@xhs/reds-rn-next";
-import { AddFriends } from "@xhs/reder-icon-svg-ReDs_icon";
+import { AddFriends, ArrowRightCenterM } from "@xhs/reder-icon-svg-ReDs_icon";
 
 export default function App() {
+  const themeColor = useThemeColor();
   const [formData, setFormData] = useState({
     textField: "设置默认值",
     rate: 0,
@@ -26,8 +30,12 @@ export default function App() {
     radio: "",
     checkbox: [1, 2, 3],
     switch: false,
+    picker: ["Thur", "am"],
+    upload: [],
   });
 
+  const [visible, setVisible] = useState(false);
+
   const formRef = useRef();
 
   const [formRules, setFormRules] = useState({
@@ -61,15 +69,44 @@ export default function App() {
     ],
   });
 
+  const twoColumns = [
+    [
+      { label: "周一", value: "Mon" },
+      { label: "周二", value: "Tues" },
+      { label: "周三", value: "Wed" },
+      { label: "周四", value: "Thur" },
+      { label: "周五", value: "Fri" },
+      { label: "周一1", value: "Mon1" },
+      { label: "周二1", value: "Tues1" },
+      { label: "周三1", value: "Wed1" },
+      { label: "周四1", value: "Thur1" },
+      { label: "周五1", value: "Fri1" },
+    ],
+    [
+      { label: "上午", value: "am" },
+      { label: "下午", value: "pm" },
+    ],
+  ];
+
   const handleSubmit = (value: any) => {
     console.log("handleSubmit", value);
   };
 
+  const handlePickerChange = (val: string[]) => {
+    console.log("handlePickerChange", val);
+  };
+
   const handleSubmitCustom = () => {
     // @ts-expect-error
     formRef?.current?.handleSubmit?.();
   };
 
+  const handlePickerConfirm = (val: string[]) => {
+    console.log("handlePickerConfirm", val);
+    setVisible(false);
+    setFormData((data) => ({ ...data, ...{ picker: val } }));
+  };
+
   return (
     <ScrollView style={{ paddingHorizontal: 16 }}>
       <Text>默认用法</Text>
@@ -98,7 +135,7 @@ export default function App() {
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
           <Rate
             value={formData.rate}
-            onChange={(value) => {
+            onChange={(value: any) => {
               setFormData((data) => ({ ...data, ...{ rate: value } }));
             }}
           />
@@ -106,7 +143,7 @@ export default function App() {
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio" required>
@@ -121,7 +158,7 @@ export default function App() {
         </FormItem>
         <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -131,21 +168,66 @@ export default function App() {
           </CheckBoxGroup>
         </FormItem>
         <FormItem label="switch" name="switch" value={formData.switch} key="switch" required>
-          <Switch value={formData.switch} onChange={(val) => setFormData((data) => ({ ...data, switch: val }))} />
+          <Switch value={formData.switch} onChange={(val: any) => setFormData((data) => ({ ...data, switch: val }))} />
+        </FormItem>
+        <FormItem label="选择器" name="picker" value={formData.picker} required key="picker">
+          <TouchableWithoutFeedback onPress={() => setVisible(true)}>
+            <View
+              style={{
+                width: 240,
+                flex: 1,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Button variant={"text"} onClick={() => setVisible(true)}>
+                日期/地点
+              </Button>
+              <Icon icon={ArrowRightCenterM} fill={themeColor.Fill5} size={16} />
+            </View>
+          </TouchableWithoutFeedback>
+          <Picker
+            columns={twoColumns}
+            value={formData.picker}
+            visible={visible}
+            onCancel={() => setVisible(false)}
+            onConfirm={handlePickerConfirm}
+            onChange={handlePickerChange}
+          />
+        </FormItem>
+        <FormItem
+          label="文件上传"
+          name="upload"
+          value={formData.upload}
+          required
+          key="upload"
+          layout={FormType.LAYOUT.VERTICAL}
+        >
+          <Uploader
+            value={formData.upload}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ upload: value } }))}
+            accept="image/*"
+            multiple={true}
+            isFormItem={true}
+          />
         </FormItem>
       </Form>
       <Text>垂直布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} layout={FormType.LAYOUT.VERTICAL}>
-        <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+        <FormItem label="rate 选填" name="rate" value={formData.rate} key="rate">
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
-        <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
+        <FormItem label="stepper 选填" name="stepper" value={formData.stepper} key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
-        <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
+        <FormItem label="radio 选填" name="radio" value={formData.radio} key="radio">
           <RadioGroup
             value={formData.radio}
             onChange={(value: string | number) => setFormData((data) => ({ ...data, ...{ radio: value as string } }))}
@@ -155,9 +237,9 @@ export default function App() {
             <Radio name="C">选项</Radio>
           </RadioGroup>
         </FormItem>
-        <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
+        <FormItem label="checkbox 选填" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -171,12 +253,15 @@ export default function App() {
       <Text>居右布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} align={FormType.ALIGN.RIGHT}>
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
@@ -191,7 +276,7 @@ export default function App() {
         </FormItem>
         <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -205,12 +290,15 @@ export default function App() {
       <Text>部分垂直布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} showSubmit={false} ref={formRef}>
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate" layout={FormType.LAYOUT.VERTICAL}>
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
@@ -231,7 +319,7 @@ export default function App() {
           LabelComponent={<Text>自定义label</Text>}
         >
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState, memo, useMemo, useEffect } from "react";
+import React, { useState, memo, useMemo, useRef, useCallback, useEffect } from "react";
 import {
   View,
   Image as RNImage,
@@ -10,17 +10,25 @@ import {
   ImageErrorEventData,
   ImageProgressEventDataIOS,
   ImageSourcePropType,
+  ImageURISource,
 } from "react-native";
-import { RedsImage, ImageDefaultProps, IMAGE_STATUS, TErrorStyle, TLoadStyle } from "./interface/index";
+import {
+  RedsImage,
+  ImageDefaultProps,
+  IMAGE_STATUS,
+  TErrorStyle,
+  TLoadStyle,
+  ImageTrackerProps,
+} from "./interface/index";
 import styles from "./styles";
-import { useAveColor, useBlur, useImageId } from "./hook";
+import { useAveColor, useBlur } from "./hook";
 import CircularProgress from "./CircularProgress";
 import { useColorMode } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { lightColor } from "@xhs/reds-token-next";
-import { formatUri } from "./utils";
+import { formatUri, isDataUri, isLocalFile, convertKeysToSnakeCase } from "./utils";
 import VisibilitySensor from "./VisibilitySensor";
-import { ImageAPMManager } from "./manager";
+import { apmPush } from "./apm";
 
 const imageReLoad = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png",
@@ -46,25 +54,21 @@ const Image = ({
   abortApmCollection,
   fadeDuration,
   onFirstDrawFinished,
-  apmBiz,
   ...props
 }: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
   useMounted("Image");
-
-  // Generate stable ID for this image instance
-  const imageId = useImageId();
-
   const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
   const [progress, setProgress] = useState(0);
-  const [viewable, setViewable] = useState(false);
-  const [apmDone, setApmDone] = useState(false);
+
+  const [loadedTime, setLoadedTime] = useState(0);
+  const [loadStartTime, setLoadStartTime] = useState(0);
 
   const formatSource = useMemo(() => {
     // @ts-ignore
-    if (_source) return { uri: formatUri({ uri: _source.uri, width }) };
+    if (_source) return _source as ImageSourcePropTyp;
     // @ts-ignore
-    return { uri: formatUri({ uri: src, width }) } as ImageSourcePropType;
-  }, [src, _source, width]);
+    return { uri: src } as ImageSourcePropType;
+  }, [src, _source]);
 
   const aveColor = useAveColor({
     source: formatSource,
@@ -74,34 +78,116 @@ const Image = ({
 
   const blurSource = useBlur({ source: formatSource });
 
-  // APM Manager Integration - Single effect for registration
-  useEffect(() => {
+  const [viewable, setViewable] = useState(false);
+  const hasInit = useRef(false);
+  const checkIsVisible = (isVisible: boolean) => {
     if (abortApmCollection) return;
+    // 判断首屏
+    if (!hasInit.current) {
+      hasInit.current = true;
+      apmDataRef.current.isFirstScreen = isVisible ? "true" : "false";
+    }
+    setViewable(isVisible);
+  };
+  const apmDataRef = useRef<ImageTrackerProps>({
+    imageUrl: "",
+    imageHost: "",
+    intersectTime: viewable ? Date.now() : 0,
+    imageSize: 0,
+    isFirstScreen: "false",
+    isPrefetch: "",
+    isSuccess: "false",
+    errorReason: "",
+    loadedStartTime: 0,
+    loadedTime: 0,
+    loadDuration: 0,
+    viewDuration: 0,
+  });
+  const [apmDoneRef, setApmDoneRef] = useState(false);
 
-    const manager = ImageAPMManager.getInstance();
-    manager.register(imageId, formatSource, apmBiz);
-
-    return () => manager.unregister(imageId);
-  }, [imageId, abortApmCollection, apmBiz]);
+  useEffect(() => {
+    if (abortApmCollection) return;
+    try {
+      const apmData = apmDataRef.current;
+      if (
+        typeof formatSource !== "number" &&
+        !isLocalFile((formatSource as ImageURISource).uri as string) &&
+        !isDataUri((formatSource as ImageURISource).uri as string)
+      ) {
+        const imageUrl = new URL((formatSource as ImageURISource).uri as string);
+        apmData.imageHost = `${imageUrl.protocol}//${imageUrl.host}`;
+        apmData.imageUrl = (formatSource as ImageURISource).uri as string;
+      }
+    } catch (error) {
+      //
+    }
+  }, [formatSource, abortApmCollection]);
 
-  // Update source if it changes
   useEffect(() => {
     if (abortApmCollection) return;
-    ImageAPMManager.getInstance().updateSource(imageId, formatSource);
-  }, [formatSource, abortApmCollection, imageId]);
+    const imageUrl = (formatSource as ImageURISource)?.uri || "";
+    if (typeof RNImage.queryCache === "function" && !!imageUrl) {
+      const uriEncodeImageUrl = encodeURI(imageUrl);
+      RNImage.queryCache([imageUrl]).then((res) => {
+        if (res?.[uriEncodeImageUrl]) {
+          apmDataRef.current.isPrefetch = "true";
+        } else {
+          apmDataRef.current.isPrefetch = "false";
+        }
+      });
+    }
+    return () => {
+      apmDataRef.current.isPrefetch = "";
+    };
+  }, [formatSource, abortApmCollection]);
 
-  // Visibility tracking - simplified
-  const checkIsVisible = (isVisible: boolean) => {
+  const pushApmData = useCallback(() => {
     if (abortApmCollection) return;
-    ImageAPMManager.getInstance().setViewable(imageId, isVisible);
-    setViewable(isVisible);
-  };
+    const apmData = apmDataRef.current;
+    const viewDuration = apmData.loadedTime - apmData.intersectTime;
+    apmData.viewDuration = viewDuration < 0 ? 0 : viewDuration;
+    /**
+     * 如果Image.queryCache未完成时,通过imageSize来判断
+     * 如果image_size是-1,那么认为图片已有缓存
+     */
+    const imageSize = apmDataRef.current.imageSize || 0;
+    if (!apmDataRef.current.isPrefetch) {
+      apmDataRef.current.isPrefetch = String((imageSize || 0) <= 0);
+    }
+    if (!apmDoneRef && apmData.imageUrl && !abortApmCollection) {
+      setApmDoneRef(true);
+      apmPush(convertKeysToSnakeCase(apmData));
+    }
+  }, [abortApmCollection]);
 
-  // Event handlers - simplified to use manager
-  const onLoadStart = () => {
-    if (!abortApmCollection) {
-      ImageAPMManager.getInstance().recordLoadStart(imageId);
+  // 判断首屏
+  if (
+    (!apmDataRef.current.isFirstScreen || apmDataRef.current.isFirstScreen === "false") &&
+    viewable &&
+    !abortApmCollection
+  ) {
+    apmDataRef.current.isFirstScreen = "true";
+  }
+  useEffect(() => {
+    if (abortApmCollection) return;
+    const apmData = apmDataRef.current;
+    if (!apmData.intersectTime && viewable) {
+      apmData.intersectTime = Date.now();
+      // 进入视窗前加载完成/失败
+      if (apmData.loadedTime || apmData.errorReason) {
+        pushApmData();
+      }
     }
+  }, [viewable, pushApmData, abortApmCollection]);
+
+  const onLoadEnd = () => {
+    props?.onLoadEnd?.();
+    if (abortApmCollection) return;
+    const apmData = apmDataRef.current;
+    // 进入视窗后加载成功/失败
+    // if (apmData.intersectTime) {
+    pushApmData();
+    // }
   };
 
   const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
@@ -111,36 +197,43 @@ const Image = ({
     if (total) {
       setProgress(((loaded / total) * 100) | 0);
     }
-    if (!abortApmCollection) {
-      ImageAPMManager.getInstance().recordProgress(imageId, loaded, total);
-    }
+    !abortApmCollection && (apmDataRef.current.imageSize = total);
     props.onProgress?.(e);
   };
-
   const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!abortApmCollection) {
-      ImageAPMManager.getInstance().recordLoad(imageId);
+      const now = Date.now();
+      setLoadedTime(now);
+      const loadDuration = now - apmDataRef.current.loadedStartTime;
+      apmDataRef.current.loadedTime = now;
+      apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
+      apmDataRef.current.isSuccess = "true";
     }
     props.onLoad?.(e);
     setImageStatus(IMAGE_STATUS.LOADED);
   };
 
-  const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+  useEffect(() => {
+    const loadDuration = loadedTime - loadStartTime;
+    apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
+  }, [loadedTime, loadStartTime]);
+
+  const onLoadStart = () => {
     if (!abortApmCollection) {
-      ImageAPMManager.getInstance().recordError(imageId, `${e.nativeEvent.error}`);
+      const now = Date.now();
+      apmDataRef.current.loadedStartTime = now;
+      setLoadStartTime(now);
     }
-    props.onError?.(e);
-    setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
   };
 
-  const onLoadEnd = () => {
+  const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
     if (!abortApmCollection) {
-      ImageAPMManager.getInstance().checkAndPush(imageId);
-      setApmDone(true);
+      apmDataRef.current.isSuccess = "false";
+      apmDataRef.current.errorReason = `${e.nativeEvent.error}`;
     }
-    props?.onLoadEnd?.();
+    props.onError?.(e);
+    setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
   };
-
   const onReload = (e: GestureResponderEvent) => {
     setImageStatus(IMAGE_STATUS.HIDE);
     props.onReload?.(e);
@@ -155,7 +248,7 @@ const Image = ({
     <View style={{ borderRadius, height, width, ...(style as {}) }}>
       {imageStatus !== IMAGE_STATUS.HIDE &&
         (!abortApmCollection ? (
-          <VisibilitySensor onChange={checkIsVisible} disabled={apmDone}>
+          <VisibilitySensor onChange={checkIsVisible} disabled={apmDoneRef}>
             <RNImage
               {...props}
               // @ts-ignore
@@ -167,7 +260,7 @@ const Image = ({
               onLoadEnd={onLoadEnd}
               fadeDuration={fadeDuration}
               // @ts-ignore
-              onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+              onFirstDrawFinished={onFirstDrawFinished}
               style={{
                 width: width || style?.width,
                 height: height || style?.height,
@@ -190,7 +283,7 @@ const Image = ({
             onLoadEnd={onLoadEnd}
             fadeDuration={fadeDuration}
             // @ts-ignore
-            onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+            onFirstDrawFinished={onFirstDrawFinished}
             style={{
               width: width || style?.width,
               height: height || style?.height,

package/src/components/Image/VisibilitySensor.tsx

@@ -1,51 +1,98 @@
-import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
-import { Dimensions, View } from "react-native";
-import type { VisibilitySensorRef, VisibilitySensorProps } from "./interface/visibilitySensor";
-
+import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
+import { Dimensions, type ScaledSize, View } from "react-native";
+import type { VisibilitySensorRef, VisibilitySensorProps, RectDimensionsState } from "./interface/visibilitySensor";
+// function useInterval(callback: () => void, delay: number | null) {
+//   const savedCallback = useRef(callback);
+//   useEffect(() => {
+//     savedCallback.current = callback;
+//   }, [callback]);
+//   useEffect(() => {
+//     if (delay === null || delay === undefined) {
+//       return;
+//     }
+//     const id = setInterval(() => savedCallback.current(), delay);
+//     return () => clearInterval(id);
+//   }, [delay]);
+// }
 const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {
   const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;
   const localRef = useRef<View>(null);
-  const lastVisibleRef = useRef<boolean | undefined>(undefined);
-  const measuredOnceRef = useRef<boolean>(false);
-
+  const hasMountedRef = useRef(false);
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current,
   }));
-
-  // Compute visibility once using native measure; avoid react state to prevent layout loops
-  const measureAndNotify = useCallback(() => {
-    if (disabled || measuredOnceRef.current) return;
-    const win = Dimensions.get("window");
-    localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {
-      const isVisible =
-        pageY + (threshold.top || 0) <= win.height &&
-        pageY + height - (threshold.bottom || 0) >= 0 &&
-        pageX + (threshold.left || 0) <= win.width &&
-        pageX + width - (threshold.right || 0) >= 0;
-
-      if (lastVisibleRef.current !== isVisible) {
-        lastVisibleRef.current = isVisible;
-        onChange(isVisible);
-        // Only measure once to match original behavior
-        measuredOnceRef.current = true;
+  const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({
+    rectTop: 0,
+    rectBottom: 0,
+    rectLeft: 0,
+    rectRight: 0,
+    rectWidth: 0,
+    rectHeight: 0,
+  });
+  const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
+  const [active, setActive] = useState<boolean>(false);
+  const measureInnerView = () => {
+    if (!active) return;
+    localRef.current?.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
+      const dimensions = {
+        rectTop: pageY,
+        rectBottom: pageY + height,
+        rectLeft: pageX,
+        rectRight: pageX + width,
+        rectWidth: width,
+        rectHeight: height,
+      };
+      if (
+        rectDimensions.rectTop !== dimensions.rectTop ||
+        rectDimensions.rectBottom !== dimensions.rectBottom ||
+        rectDimensions.rectLeft !== dimensions.rectLeft ||
+        rectDimensions.rectRight !== dimensions.rectRight ||
+        rectDimensions.rectWidth !== dimensions.rectWidth ||
+        rectDimensions.rectHeight !== dimensions.rectHeight
+      ) {
+        setRectDimensions(dimensions);
       }
     });
-  }, [disabled, onChange, threshold]);
-
-  // Keep active in sync with disabled prop
+  };
+  // useInterval(measureInnerView, delay || 100);
+  const startWatching = useCallback(() => {
+    if (!active) setActive(true);
+  }, [active]);
+  const stopWatching = useCallback(() => {
+    if (active) setActive(false);
+  }, [active]);
   useEffect(() => {
-    // If it becomes enabled and we haven't measured yet, measure once now
-    if (!disabled && !measuredOnceRef.current) {
-      // Defer to allow layout to settle
-      requestAnimationFrame(() => measureAndNotify());
+    if (!disabled) {
+      startWatching();
     }
-  }, [disabled, measureAndNotify]);
-
+    return () => {
+      stopWatching();
+    };
+  }, [disabled, startWatching, stopWatching]);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    const window: ScaledSize = Dimensions.get("window");
+    const isVisible: boolean =
+      rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window
+      rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 && // Bottom edge is within the top of the window
+      rectDimensions.rectLeft + (threshold.left || 0) <= window.width && // Left edge is within the right of the window
+      rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
+    if (lastValue !== isVisible) {
+      setLastValue(isVisible);
+      onChange(isVisible);
+      if (isVisible && triggerOnce) {
+        stopWatching();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rectDimensions, lastValue]);
   return (
-    <View ref={localRef} {...rest} onLayout={measureAndNotify}>
+    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
       {children}
     </View>
   );
 });
-
 export default VisibilitySensor;

package/src/components/Image/doc/index.mdx

@@ -24,6 +24,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | abortApmCollection | 是否放弃上报图片加载性能数据      | boolean                              | false            |
 | apmBiz             | 客户端上报埋点参数                | ApmBiz                               |                  |
 | fadeDuration       | 控制图片加载时的动画持续事件      | number                               | 300              |
+| format             | 是否启动format                    | boolean                              | true             |
 
 ### Events