@xhsreds/reds-rn-next 0.9.1-feat-swiper202511031535 → 0.9.1-feat-0.10.0-rc202511031536

package/lib/types/components/PullRefresh/PullRefresh.d.ts

@@ -11,6 +11,8 @@ declare namespace PullRefresh {
         showText: boolean;
         initRefresh: boolean;
         refresh: boolean;
+        nativeAndroidPullRefresh: boolean;
+        androidRefreshProps: {};
     };
 }
 export default PullRefresh;

package/lib/types/components/PullRefresh/interface/index.d.ts

@@ -16,6 +16,9 @@ export interface RedsPullRefresh {
     showText?: boolean;
     initRefresh?: boolean;
     refresh?: boolean;
+    nativeAndroidPullRefresh?: boolean;
+    androidRefreshProps?: Object;
+    androidColors?: string[];
 }
 export declare enum PullState {
     INIT = 0,// 初始化
@@ -35,4 +38,6 @@ export declare const PullRefreshDefaultProps: {
     showText: boolean;
     initRefresh: boolean;
     refresh: boolean;
+    nativeAndroidPullRefresh: boolean;
+    androidRefreshProps: {};
 };

package/lib/types/index.d.ts

@@ -55,5 +55,4 @@ export * from "./components/SlimAlert";
 export * from "./components/SlimNavigationBar";
 export * from "./components/Search";
 export * from "./components/ActionablePopover";
-export * from "./components/Swiper";
 import "react-native-url-polyfill/auto";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.9.1-feat-swiper202511031535",
+  "version": "0.9.1-feat-0.10.0-rc202511031536",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -24,7 +24,6 @@
     "react": "*",
     "react-native": "*",
     "react-native-fs": "2.20.0",
-    "react-native-pager-view": ">=6.0.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
     "@xhsreds/reds-token-next": "0.9.0"

package/src/components/Carousel/Carousel.tsx

@@ -238,8 +238,8 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
 
     requestAnimationFrame(() => {
       let scrollOffset = index * offsetPerItem;
-
-      if (props.playingMode !== "normal") {
+      // 修复：只有在无限循环模式下才需要减去containerPadding
+      if (props.playingMode !== "normal" && props.infinite) {
         scrollOffset -= containerPadding;
       }
 
@@ -287,10 +287,18 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
       props.direction === "horizontal" ? event.nativeEvent.contentOffset.x : event.nativeEvent.contentOffset.y;
 
     let index: number;
+    // 修复：对于非无限循环的compact模式，需要调整偏移量计算
     if (props.playingMode === "normal") {
       index = Math.round(offset / offsetPerItem);
     } else {
-      index = Math.round((offset + containerPadding) / offsetPerItem);
+      // 对于compact和card模式
+      if (!props.infinite) {
+        // 非无限循环模式：不需要加containerPadding，因为滚动时已经考虑了padding
+        index = Math.round(offset / offsetPerItem);
+      } else {
+        // 无限循环模式：需要加containerPadding
+        index = Math.round((offset + containerPadding) / offsetPerItem);
+      }
     }
 
     index = Math.max(0, Math.min(index, extendedData.length - 1));
@@ -312,6 +320,10 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
       const clampedIndex = Math.max(0, Math.min(index, length - 1));
       setCurrentIndex(clampedIndex);
       setRealIndex(clampedIndex);
+      // 修复：确保滚动到正确位置
+      if (props.playingMode !== "normal") {
+        scrollToIndex(clampedIndex, true);
+      }
     }
 
     setIsScrolling(false);

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, ScrollView, Image as RNImage } from "react-native";
-import { Carousel } from "@xhs/reds-rn-next";
+import { Carousel, CarouselType } from "@xhs/reds-rn-next";
 const styles = StyleSheet.create({
   container: {
     paddingBottom: 100,
@@ -54,6 +54,18 @@ export default function App() {
         handlable={false}
       />
       <Carousel
+        data={images}
+        autoPlay={false}
+        currentIndex={3}
+        onChange={handleChange}
+        onClick={handleClick}
+        displayNumbers={true}
+        // duration={3000}
+        playingMode={CarouselType.PLAYINGMODE.COMPACT}
+        handlable={true}
+        infinite={false}
+      />
+      {/* <Carousel
         autoPlay={true}
         currentIndex={3}
         onChange={handleChange}
@@ -82,7 +94,7 @@ export default function App() {
         {images.map((item, idx) => (
           <RNImage style={{ width: 300, height: 200 }} source={{ uri: item }} />
         ))}
-      </Carousel>
+      </Carousel> */}
       {/* <Desc>自动播放（默认轮播间隔1000ms）</Desc>
       <Carousel data={images} duration={3000} />
 

package/src/components/Image/Image.tsx

@@ -27,8 +27,8 @@ import { useColorMode } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { lightColor } from "@xhs/reds-token-next";
 import { formatUri, isDataUri, isLocalFile, convertKeysToSnakeCase } from "./utils";
-import VisibilitySensor from "./VisibilitySensor";
 import { apmPush } from "./apm";
+import { queryCacheBatched } from "./queryCacheBatcher";
 
 const imageReLoad = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png",
@@ -56,16 +56,14 @@ const Image = ({
   onFirstDrawFinished,
   ...props
 }: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
-  useMounted("Image");
+  // useMounted("Image");
   const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
   const [progress, setProgress] = useState(0);
-
-  const [loadedTime, setLoadedTime] = useState(0);
-  const [loadStartTime, setLoadStartTime] = useState(0);
+  const mountTimeRef = useRef<number>(Date.now());
 
   const formatSource = useMemo(() => {
     // @ts-ignore
-    if (_source) return _source as ImageSourcePropTyp;
+    if (_source) return _source as ImageSourcePropType;
     // @ts-ignore
     return { uri: src } as ImageSourcePropType;
   }, [src, _source]);
@@ -78,21 +76,11 @@ const Image = ({
 
   const blurSource = useBlur({ source: formatSource });
 
-  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);
-  };
+  // Visibility tracking removed: no longer needed for APM
   const apmDataRef = useRef<ImageTrackerProps>({
     imageUrl: "",
     imageHost: "",
-    intersectTime: viewable ? Date.now() : 0,
+    intersectTime: 0,
     imageSize: 0,
     isFirstScreen: "false",
     isPrefetch: "",
@@ -103,7 +91,7 @@ const Image = ({
     loadDuration: 0,
     viewDuration: 0,
   });
-  const [apmDoneRef, setApmDoneRef] = useState(false);
+  const apmDoneRef = useRef(false);
 
   useEffect(() => {
     if (abortApmCollection) return;
@@ -126,17 +114,19 @@ const Image = ({
   useEffect(() => {
     if (abortApmCollection) return;
     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";
-        }
+    if (!imageUrl) return;
+    let alive = true;
+    queryCacheBatched(imageUrl)
+      .then((isPrefetched) => {
+        if (!alive) return;
+        apmDataRef.current.isPrefetch = String(isPrefetched);
+      })
+      .catch(() => {
+        if (!alive) return;
+        apmDataRef.current.isPrefetch = "false";
       });
-    }
     return () => {
+      alive = false;
       apmDataRef.current.isPrefetch = "";
     };
   }, [formatSource, abortApmCollection]);
@@ -144,8 +134,9 @@ const Image = ({
   const pushApmData = useCallback(() => {
     if (abortApmCollection) return;
     const apmData = apmDataRef.current;
-    const viewDuration = apmData.loadedTime - apmData.intersectTime;
-    apmData.viewDuration = viewDuration < 0 ? 0 : viewDuration;
+    // Simplify: do not track view duration/intersect time
+    apmData.intersectTime = 0;
+    apmData.viewDuration = 0;
     /**
      * 如果Image.queryCache未完成时,通过imageSize来判断
      * 如果image_size是-1,那么认为图片已有缓存
@@ -154,40 +145,19 @@ const Image = ({
     if (!apmDataRef.current.isPrefetch) {
       apmDataRef.current.isPrefetch = String((imageSize || 0) <= 0);
     }
-    if (!apmDoneRef && apmData.imageUrl && !abortApmCollection) {
-      setApmDoneRef(true);
+    if (!apmDoneRef.current && apmData.imageUrl && !abortApmCollection) {
+      apmDoneRef.current = true;
       apmPush(convertKeysToSnakeCase(apmData));
     }
   }, [abortApmCollection]);
 
   // 判断首屏
-  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]);
-
+  // isFirstScreen stays "false" and intersectTime stays 0 by design
   const onLoadEnd = () => {
     props?.onLoadEnd?.();
     if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    // 进入视窗后加载成功/失败
-    // if (apmData.intersectTime) {
+    // Push regardless of visibility/intersect time
     pushApmData();
-    // }
   };
 
   const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
@@ -203,8 +173,10 @@ const Image = ({
   const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!abortApmCollection) {
       const now = Date.now();
-      setLoadedTime(now);
-      const loadDuration = now - apmDataRef.current.loadedStartTime;
+      let start = apmDataRef.current.loadedStartTime || mountTimeRef.current;
+      if (start > now) start = now;
+      apmDataRef.current.loadedStartTime = start;
+      const loadDuration = now - start;
       apmDataRef.current.loadedTime = now;
       apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
       apmDataRef.current.isSuccess = "true";
@@ -213,17 +185,8 @@ const Image = ({
     setImageStatus(IMAGE_STATUS.LOADED);
   };
 
-  useEffect(() => {
-    const loadDuration = loadedTime - loadStartTime;
-    apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
-  }, [loadedTime, loadStartTime]);
-
   const onLoadStart = () => {
-    if (!abortApmCollection) {
-      const now = Date.now();
-      apmDataRef.current.loadedStartTime = now;
-      setLoadStartTime(now);
-    }
+    !abortApmCollection && (apmDataRef.current.loadedStartTime = Date.now());
   };
 
   const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
@@ -246,54 +209,29 @@ const Image = ({
 
   return (
     <View style={{ borderRadius, height, width, ...(style as {}) }}>
-      {imageStatus !== IMAGE_STATUS.HIDE &&
-        (!abortApmCollection ? (
-          <VisibilitySensor onChange={checkIsVisible} disabled={apmDoneRef}>
-            <RNImage
-              {...props}
-              // @ts-ignore
-              source={formatSource}
-              onLoadStart={onLoadStart}
-              onLoad={onLoad}
-              onProgress={onProgress}
-              onError={onError}
-              onLoadEnd={onLoadEnd}
-              fadeDuration={fadeDuration}
-              // @ts-ignore
-              onFirstDrawFinished={onFirstDrawFinished}
-              style={{
-                width: width || style?.width,
-                height: height || style?.height,
-                borderRadius,
-                // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-              }}
-              // @ts-ignore
-              apmBiz={props.apmBiz}
-            ></RNImage>
-          </VisibilitySensor>
-        ) : (
-          <RNImage
-            {...props}
-            // @ts-ignore
-            source={formatSource}
-            onLoadStart={onLoadStart}
-            onLoad={onLoad}
-            onProgress={onProgress}
-            onError={onError}
-            onLoadEnd={onLoadEnd}
-            fadeDuration={fadeDuration}
-            // @ts-ignore
-            onFirstDrawFinished={onFirstDrawFinished}
-            style={{
-              width: width || style?.width,
-              height: height || style?.height,
-              borderRadius,
-              // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-            }}
-            // @ts-ignore
-            apmBiz={props.apmBiz}
-          ></RNImage>
-        ))}
+      {imageStatus !== IMAGE_STATUS.HIDE && (
+        <RNImage
+          {...props}
+          // @ts-ignore
+          source={formatSource}
+          onLoadStart={onLoadStart}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          onError={onError}
+          onLoadEnd={onLoadEnd}
+          fadeDuration={fadeDuration}
+          // @ts-ignore
+          onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+          style={{
+            width: width || style?.width,
+            height: height || style?.height,
+            borderRadius,
+            // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
+          }}
+          // @ts-ignore
+          apmBiz={props.apmBiz}
+        ></RNImage>
+      )}
       {imageStatus === IMAGE_STATUS.LOADING && loadStyle !== TLoadStyle.NONE && (
         <View
           style={{

package/src/components/Image/VisibilitySensor.tsx

@@ -87,8 +87,7 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
         stopWatching();
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectDimensions, lastValue]);
+  }, [rectDimensions, lastValue, threshold, onChange, triggerOnce, stopWatching]);
   return (
     <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
       {children}

package/src/components/Image/queryCacheBatcher.ts

@@ -0,0 +1,84 @@
+import { Image as RNImage } from "react-native";
+
+declare const global: any;
+
+type Resolver = (value: boolean) => void;
+
+// Runtime switch: set global.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED = false to disable batching
+let enabled: boolean = global?.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED !== false;
+let FLUSH_MS = 50;
+
+const pending = new Map<string, Resolver[]>();
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+function directQuery(url: string): Promise<boolean> {
+  try {
+    if (typeof (RNImage as any).queryCache !== "function") {
+      return Promise.resolve(false);
+    }
+    return (RNImage as any)
+      .queryCache([url])
+      .then((res: Record<string, any>) => !!(res?.[url] || res?.[encodeURI(url)]))
+      .catch(() => false);
+  } catch (_) {
+    return Promise.resolve(false);
+  }
+}
+
+function flush() {
+  const entries = Array.from(pending.entries());
+  pending.clear();
+  timer = null;
+
+  const urls = entries.map(([url]) => url);
+  if (!urls.length) return;
+
+  if (typeof (RNImage as any).queryCache !== "function") {
+    entries.forEach(([, resolvers]) => resolvers.forEach((r) => r(false)));
+    return;
+  }
+
+  (RNImage as any)
+    .queryCache(urls)
+    .then((res: Record<string, any>) => {
+      entries.forEach(([url, resolvers]) => {
+        const ok = !!(res?.[url] || res?.[encodeURI(url)]);
+        resolvers.forEach((r) => r(ok));
+      });
+    })
+    .catch(() => {
+      entries.forEach(([, resolvers]) => resolvers.forEach((r) => r(false)));
+    });
+}
+
+function schedule() {
+  if (!timer) {
+    timer = setTimeout(flush, FLUSH_MS);
+  }
+}
+
+export function setQueryCacheBatchingEnabled(v: boolean) {
+  enabled = v;
+}
+
+export function configureQueryCacheBatching(options: { flushMs?: number } = {}) {
+  if (typeof options.flushMs === "number" && options.flushMs >= 0) {
+    FLUSH_MS = options.flushMs;
+  }
+}
+
+// Main entry: batched query with quick toggle to direct query
+export function queryCacheBatched(url: string): Promise<boolean> {
+  if (!url) return Promise.resolve(false);
+  if (!enabled) return directQuery(url);
+
+  return new Promise<boolean>((resolve) => {
+    const list = pending.get(url);
+    if (list) {
+      list.push(resolve);
+    } else {
+      pending.set(url, [resolve]);
+    }
+    schedule();
+  });
+}

package/src/components/Popover/Popover.tsx

@@ -24,6 +24,7 @@ export default ({
   arrowStyles: propsArrowStyles,
   offset,
   duration,
+  animation_duration,
   hostName,
   maxWidth,
   arrowOffset,
@@ -121,18 +122,18 @@ export default ({
       if (layout.x !== defaultValue) {
         Animated.timing(progress, {
           toValue: 1,
-          duration: duration ?? 400,
+          duration: animation_duration ?? 400,
           useNativeDriver: false,
         }).start();
       }
     } else {
       Animated.timing(progress, {
         toValue: 0,
-        duration: duration ?? 400,
+        duration: animation_duration ?? 400,
         useNativeDriver: false,
       }).start();
     }
-  }, [_visible, layout]);
+  }, [_visible, layout, animation_duration]);
 
   const onMaskChange = (event: GestureResponderEvent, value: boolean) => {
     if (isControl) return;

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

@@ -8,27 +8,28 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性              | 描述                              | 类型                                                                                                | 默认值          |
-| ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
-| visible           | 是否显示气泡                      | boolean                                                                                             | undefined       |
-| placement         | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
-| content           | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
-| opacity           | 遮罩透明度                        | number                                                                                              | 0               |
-| mode              | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
-| trigger           | 触发方式                          | "click" | "touch"                                                                              | click           |
-| duration          | 固定时间后popover消失             | number                                                                                              |                 |
-| zIndex            | 层级                              | number                                                                                              | 1000            |
-| popContainerStyle | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
-| closeOnClickAgain | 再次点击关闭                      | boolean                                                                                             | true            |
-| children          | popover 作用的目标节点            | ReactNode                                                                                           |                 |
-| floatingStyles    | floating style                    | ViewStyle                                                                                           | `{}`            |
-| arrowStyles       | arrow style                       | ImageStyle                                                                                          | `{}`            |
-| isControl         | 是否受控                          | boolean                                                                                             | false           |
-| offset            | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
-| arrowOffset       | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
-| hostName          | hostName                          | string                                                                                              | root            |
-| maxWidth          | popover最大宽度                   | number                                                                                              | 280             |
-| layoutChange      | 布局是否变化                      | any                                                                                                 | `{}`            |
+| 属性               | 描述                              | 类型                                                                                                | 默认值          |
+| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
+| visible            | 是否显示气泡                      | boolean                                                                                             | undefined       |
+| placement          | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
+| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
+| opacity            | 遮罩透明度                        | number                                                                                              | 0               |
+| mode               | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
+| trigger            | 触发方式                          | "click" | "touch"                                                                              | click           |
+| duration           | 固定时间后popover消失             | number                                                                                              |                 |
+| animation_duration | animation_duration 动画时间       | number                                                                                              |                 |
+| zIndex             | 层级                              | number                                                                                              | 1000            |
+| popContainerStyle  | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
+| closeOnClickAgain  | 再次点击关闭                      | boolean                                                                                             | true            |
+| children           | popover 作用的目标节点            | ReactNode                                                                                           |                 |
+| floatingStyles     | floating style                    | ViewStyle                                                                                           | `{}`            |
+| arrowStyles        | arrow style                       | ImageStyle                                                                                          | `{}`            |
+| isControl          | 是否受控                          | boolean                                                                                             | false           |
+| offset             | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
+| arrowOffset        | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
+| hostName           | hostName                          | string                                                                                              | root            |
+| maxWidth           | popover最大宽度                   | number                                                                                              | 280             |
+| layoutChange       | 布局是否变化                      | any                                                                                                 | `{}`            |
 
 ### Events
 

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

@@ -12,6 +12,7 @@ export interface RedsPopover {
   mode?: "light" | "dark" | "alwaysLight" | "alwaysDark";
   trigger?: "click" | "touch";
   duration?: number;
+  animation_duration?: number;
   zIndex?: number;
   popContainerStyle?: ViewStyle;
   closeOnClickAgain?: boolean;