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

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

@@ -2,47 +2,40 @@ import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle
 import { Dimensions, View } from "react-native";
 import type { VisibilitySensorRef, VisibilitySensorProps } from "./interface/visibilitySensor";
 
+// Measure visibility once on first layout to avoid state-driven re-render loops
 const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {
-  const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;
+  const { onChange, disabled = false, threshold = {}, children, ...rest } = props;
   const localRef = useRef<View>(null);
-  const lastVisibleRef = useRef<boolean | undefined>(undefined);
-  const measuredOnceRef = useRef<boolean>(false);
+  const measuredOnceRef = useRef(false);
 
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current,
   }));
 
-  // Compute visibility once using native measure; avoid react state to prevent layout loops
-  const measureAndNotify = useCallback(() => {
+  const measureOnce = useCallback(() => {
     if (disabled || measuredOnceRef.current) return;
     const win = Dimensions.get("window");
     localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {
+      if (measuredOnceRef.current) return; // guard against double-calls in same frame
       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;
-      }
+      measuredOnceRef.current = true;
+      onChange(isVisible);
     });
   }, [disabled, onChange, threshold]);
 
-  // Keep active in sync with disabled prop
+  // If initially disabled, measure once when enabled later
   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());
+      requestAnimationFrame(() => measureOnce());
     }
-  }, [disabled, measureAndNotify]);
+  }, [disabled, measureOnce]);
 
   return (
-    <View ref={localRef} {...rest} onLayout={measureAndNotify}>
+    <View ref={localRef} {...rest} onLayout={measureOnce}>
       {children}
     </View>
   );

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
 

package/src/components/Image/hook/index.ts

@@ -30,5 +30,3 @@ export const useBlur = ({ source }: { source: ImageSourcePropType }) => {
   if (!url) return { uri: "" };
   return { uri: url.includes("?") ? url.replace(/\?.*/, "?imageMogr2/blur/25x25") : url + "?imageMogr2/blur/25x25" };
 };
-
-export { useImageId } from "./useImageId";

package/src/components/Image/interface/index.ts

@@ -52,6 +52,7 @@ export interface RedsImage {
   apmBiz?: ApmBiz;
   onFirstDrawFinished?: (e: Event) => void;
   fadeDuration?: number;
+  format?: boolean;
 }
 
 export interface RedsImageEvent {}
@@ -63,6 +64,7 @@ export const ImageDefaultProps = {
   abortApmCollection: false,
   onFirstDrawFinished: () => {},
   fadeDuration: 300,
+  format: true,
 };
 
 export interface ImageTrackerProps {

package/src/components/ImagePreview/ImagePreview.tsx

@@ -3,7 +3,9 @@ import { Text, Image, Animated, View, TouchableOpacity, TouchableWithoutFeedback
 import Carousel from "../Carousel";
 import { RedsImagePreview, ImagePreviewDefaultProps } from "./interface";
 import styles from "./styles";
+import useMounted from "../../pvCount/useUnmountedProcess";
 const ImagePreview = (props: RedsImagePreview) => {
+  useMounted("Image");
   const [currentIndex, setCurrentIndex] = useState(props.initIndex || 0);
   const [_visible, setVisible] = useState(props.visible);
   const handleChange = (url: string, index: number) => {

package/src/components/LanguageProvider/LanguageProvider.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { RedsLanguageProvider, LanguageProviderDefaultProps } from "./interface/index";
 import { LanguageProviderContext } from "./hooks/LanguageContext";
-
+import useMounted from "../../pvCount/useUnmountedProcess";
 const LanguageProvider = (props: RedsLanguageProvider) => {
+  useMounted("LanguageProvider");
   const { children } = props;
   return (
     <LanguageProviderContext.Provider value={{ language: props.language!, config: props.config }}>

package/src/components/List/List.tsx

@@ -37,7 +37,7 @@ const List: React.FC<RedsList> = ({ headerText, footerText, type = "grouped", co
   }, [registeredChildren.current]);
 
   return (
-    <View style={[styles.list, containerStyle]}>
+    <View style={[styles.list, containerStyle, { marginHorizontal: type === "grouped" ? 16 : 0 }]}>
       {headerText && <Text style={type === "plain" ? styles.headerTextPlain : styles.headerText}>{headerText}</Text>}
       <ListContext.Provider value={{ registerChild, unregisterChild }}>
         <View style={type === "plain" ? styles.listContainerPlain : styles.listContainer}>{children}</View>