@unif/react-native-hms-scan 0.1.0

package/src/HmsScanView.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, type ComponentRef } from 'react';
+import type { ViewProps } from 'react-native';
+import NativeHmsScanView from './HmsScanViewNativeComponent';
+import { formatsToCsv, parseResultsJson } from './format';
+import type { BarcodeFormat, ScanResult } from './types';
+
+/** 暗光提示 / 手电状态。 */
+export interface TorchStatus {
+  /** 环境暗到建议显示手电按钮（仅 Android 上报）。 */
+  available: boolean;
+  /** 手电当前是否点亮。 */
+  on: boolean;
+}
+
+export interface HmsScanViewProps extends ViewProps {
+  /** 限定码制；不传 = 全部。 */
+  formats?: BarcodeFormat[];
+  /** 连续扫码，默认 true。 */
+  continuous?: boolean;
+  /** 暂停/恢复扫码，默认 false。 */
+  paused?: boolean;
+  /** 手电筒，默认 false（iOS 为尽力而为）。 */
+  torch?: boolean;
+  /** 命中一个或多个码时回调（已解析为强类型）。 */
+  onScanResult?: (results: ScanResult[]) => void;
+  /** 相机/解码出错时回调。 */
+  onScanError?: (error: { code: string; message: string }) => void;
+  /** 暗光提示 / 手电状态变化时回调。 */
+  onTorchStatus?: (status: TorchStatus) => void;
+}
+
+/**
+ * 底层 headless 扫码相机组件：只渲染相机预览并发出扫码结果事件。
+ * 取景框 / 扫描线 / 手电按钮等 UI 由上层（如 `<Scanner>`）用普通 RN 视图叠加绘制。
+ *
+ * Android = 华为 RemoteView，iOS = HmsCustomScanViewController（Scan SDK-Plus / ScanKitFrameWork）。
+ */
+export const HmsScanView = forwardRef<
+  ComponentRef<typeof NativeHmsScanView>,
+  HmsScanViewProps
+>(function HmsScanView(
+  {
+    formats,
+    continuous = true,
+    paused = false,
+    torch = false,
+    onScanResult,
+    onScanError,
+    onTorchStatus,
+    ...viewProps
+  },
+  ref
+) {
+  return (
+    <NativeHmsScanView
+      {...viewProps}
+      ref={ref}
+      formatsCsv={formatsToCsv(formats)}
+      continuous={continuous}
+      paused={paused}
+      torch={torch}
+      onScanResult={
+        onScanResult
+          ? (e) => onScanResult(parseResultsJson(e.nativeEvent.resultsJson))
+          : undefined
+      }
+      onScanError={
+        onScanError
+          ? (e) =>
+              onScanError({
+                code: e.nativeEvent.code,
+                message: e.nativeEvent.message,
+              })
+          : undefined
+      }
+      onTorchStatus={
+        onTorchStatus
+          ? (e) =>
+              onTorchStatus({
+                available: e.nativeEvent.available,
+                on: e.nativeEvent.on,
+              })
+          : undefined
+      }
+    />
+  );
+});

package/src/HmsScanViewNativeComponent.ts

@@ -0,0 +1,44 @@
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+// RN codegen Fabric 组件规范（注册名 "HmsScanView"）。
+// 事件 payload 都用基础类型 / 单字符串，绕开 codegen 对复杂事件结构的限制：
+// 扫码结果以 JSON 字符串回传（由 src/HmsScanView.tsx 解析成 ScanResult[]）。
+
+type ScanResultEvent = Readonly<{
+  /** JSON 编码的 ScanResult[]。 */
+  resultsJson: string;
+}>;
+
+type ScanErrorEvent = Readonly<{
+  code: string;
+  message: string;
+}>;
+
+type TorchStatusEvent = Readonly<{
+  /** 环境是否暗到建议显示手电按钮（Android OnLightVisibleCallBack）。 */
+  available: boolean;
+  /** 手电当前是否点亮。 */
+  on: boolean;
+}>;
+
+export interface NativeProps extends ViewProps {
+  /** 限定码制（逗号分隔的 BarcodeFormat），空串 = 全部。 */
+  formatsCsv?: WithDefault<string, ''>;
+  /** 连续扫码（命中后继续，不自动停）。 */
+  continuous?: WithDefault<boolean, true>;
+  /** 暂停/恢复扫码（命中后想停在结果卡时用）。 */
+  paused?: WithDefault<boolean, false>;
+  /** 手电筒（Android 直接控制；iOS 走 AVCaptureDevice 尽力补）。 */
+  torch?: WithDefault<boolean, false>;
+
+  onScanResult?: DirectEventHandler<ScanResultEvent>;
+  onScanError?: DirectEventHandler<ScanErrorEvent>;
+  onTorchStatus?: DirectEventHandler<TorchStatusEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('HmsScanView');

package/src/NativeHmsScan.ts

@@ -0,0 +1,24 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+// RN codegen 规范（宿主 App build 时生成 NativeHmsScanSpec）。
+// 注：为规避 codegen 对"对象数组 / 字符串字面量联合"的类型限制，
+// decodeImage 返回 JSON 编码的 ScanResult[]（由 src/format.ts 解析回强类型），
+// 权限状态返回字符串（由 src/permissions.ts 归一）。
+export interface Spec extends TurboModule {
+  /**
+   * 解码本地图片里的条码 / 二维码。
+   * @param uri 本地图片：file:// / content:// / ph:// / 绝对路径（不下载远程 URL）。
+   * @param formatsCsv 限定码制（逗号分隔的 BarcodeFormat），空串 = 全部。
+   * @returns JSON 编码的 ScanResult[]（可能为空数组）。
+   */
+  decodeImage(uri: string, formatsCsv: string): Promise<string>;
+
+  /** 当前相机权限：'granted' | 'denied' | 'blocked' | 'undetermined'。 */
+  getCameraPermissionStatus(): Promise<string>;
+
+  /** 发起相机权限请求，返回请求后的状态字符串。 */
+  requestCameraPermission(): Promise<string>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('HmsScan');

package/src/Scanner/DeniedOverlay.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, View } from 'react-native';
+import {
+  Button,
+  Empty,
+  useThemedStyles,
+  r,
+  type ColorTokens,
+} from '@unif/react-native-design';
+
+interface DeniedOverlayProps {
+  onClose?: () => void;
+  onSettings: () => void;
+}
+
+// 相机权限未授权态：无相机可显示，故用主题背景的全屏空态（与 react-native-camera 的 NoPermission 一致）。
+export function DeniedOverlay({ onClose, onSettings }: DeniedOverlayProps) {
+  const s = useThemedStyles(makeStyles);
+  return (
+    <View style={s.overlay}>
+      <Empty
+        icon="permission-denied"
+        title="需要相机权限"
+        desc="开启相机后，才能扫描商品条码与门店二维码。请前往系统设置授权。"
+      />
+      <View style={styles.row}>
+        {onClose && <Button label="取消" variant="ghost" onPress={onClose} style={styles.btn} />}
+        <Button
+          label="去设置开启"
+          variant="primary"
+          leftIcon="settings"
+          onPress={onSettings}
+          style={styles.btn}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', columnGap: r(12), marginTop: r(8) },
+  btn: { flex: 1 },
+});
+
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 40,
+      backgroundColor: c.background,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: r(40),
+      rowGap: r(8),
+    },
+  });

package/src/Scanner/ResultFail.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import {
+  Button,
+  Empty,
+  useThemedStyles,
+  r,
+  type ColorTokens,
+  type ShadowTokens,
+} from '@unif/react-native-design';
+
+interface ResultFailProps {
+  bottomInset: number;
+  onRetry: () => void;
+}
+
+// 未识别失败的底部弹层：design 的 Empty（error-alert）+ Button（重新扫描）。
+// 聚焦款不加背景遮罩，与浮层确认卡保持一致。
+export function ResultFail({ bottomInset, onRetry }: ResultFailProps) {
+  const s = useThemedStyles(makeStyles);
+  const anim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(anim, { toValue: 1, duration: 320, useNativeDriver: true }).start();
+  }, [anim]);
+
+  return (
+    <Animated.View
+      style={[
+        s.sheet,
+        { transform: [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [r(320), 0] }) }] },
+      ]}
+    >
+      <View style={s.grabber} />
+      <View style={[styles.inner, { paddingBottom: bottomInset + r(14) }]}>
+        <Empty
+          icon="error-alert"
+          title="未识别到条码"
+          desc="请将条码完整置于框内、保持平整并对准光线后重试。"
+        />
+        <Button label="重新扫描" leftIcon="retry" variant="primary" block onPress={onRetry} />
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  inner: { paddingHorizontal: r(18), paddingTop: r(8), rowGap: r(16) },
+});
+
+const makeStyles = (c: ColorTokens, shadow: ShadowTokens) =>
+  StyleSheet.create({
+    sheet: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 50,
+      backgroundColor: c.surface,
+      borderTopLeftRadius: r(20),
+      borderTopRightRadius: r(20),
+      paddingTop: r(10),
+      ...shadow.floating,
+    },
+    grabber: {
+      width: r(40),
+      height: r(4),
+      borderRadius: 999,
+      backgroundColor: c.surfaceContainerHighest,
+      alignSelf: 'center',
+    },
+  });

package/src/Scanner/ResultFocus.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import {
+  Avatar,
+  Button,
+  Card,
+  StatusDot,
+  useColors,
+  useThemedStyles,
+  r,
+  rf,
+  fw,
+  fontMono,
+} from '@unif/react-native-design';
+import type { ScanProduct } from '../types';
+
+interface ResultFocusProps {
+  product: ScanProduct;
+  /** 识别耗时（ms），用于 "已识别 · 0.6s"。<=0 则只显示 "已识别"。 */
+  detectMs: number;
+  bottomInset: number;
+  onContinue: () => void;
+  onConfirm: () => void;
+}
+
+// 聚焦款"浮层确认卡"：design Card + 2px 主色描边，悬浮在相机之上（无遮罩）。
+export function ResultFocus({
+  product,
+  detectMs,
+  bottomInset,
+  onContinue,
+  onConfirm,
+}: ResultFocusProps) {
+  const c = useColors();
+  const s = useThemedStyles(makeStyles);
+  const anim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(anim, { toValue: 1, duration: 280, useNativeDriver: true }).start();
+  }, [anim]);
+
+  const brandChar = product.brandChar ?? (product.brand ?? product.name).charAt(0);
+  const badge = detectMs > 0 ? `已识别 · ${(detectMs / 1000).toFixed(1)}s` : '已识别';
+  const caption = product.priceCaption ?? '建议零售';
+
+  return (
+    <Animated.View
+      style={[
+        styles.wrap,
+        { bottom: bottomInset + r(18) },
+        {
+          opacity: anim,
+          transform: [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [r(24), 0] }) }],
+        },
+      ]}
+    >
+      <Card borderColor={c.primary} borderWidth={2} borderRadius={r(16)} padding={r(14)}>
+        {/* 头部：成功点 · 已识别 · 条码 */}
+        <View style={styles.header}>
+          <StatusDot status="done" size={r(20)} />
+          <Text style={s.badge}>{badge}</Text>
+          <View style={styles.spacer} />
+          {!!product.barcode && <Text style={s.barcode}>{product.barcode}</Text>}
+        </View>
+
+        {/* 商品行 */}
+        <View style={styles.body}>
+          <Avatar label={brandChar} variant="brand" size="xl" />
+          <View style={styles.info}>
+            <Text style={s.name} numberOfLines={2}>
+              {product.brand ? `${product.brand} ` : ''}
+              {product.name}
+            </Text>
+            {!!(product.spec || product.stockShort) && (
+              <Text style={s.sub} numberOfLines={1}>
+                {[product.spec, product.stockShort ? `库存${product.stockShort}` : null]
+                  .filter(Boolean)
+                  .join(' · ')}
+              </Text>
+            )}
+          </View>
+          {!!product.price && (
+            <View style={styles.priceCol}>
+              <Text style={s.price}>{product.price}</Text>
+              <Text style={s.caption}>{caption}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* 操作 */}
+        <View style={styles.actions}>
+          <Button label="继续扫描" variant="secondary" onPress={onContinue} style={styles.btn} />
+          <Button label="确认" variant="primary" onPress={onConfirm} style={styles.btn} />
+        </View>
+      </Card>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { position: 'absolute', left: r(16), right: r(16), zIndex: 50 },
+  header: { flexDirection: 'row', alignItems: 'center', columnGap: r(7), marginBottom: r(12) },
+  spacer: { flex: 1 },
+  body: { flexDirection: 'row', alignItems: 'center', columnGap: r(14), marginBottom: r(14) },
+  info: { flex: 1, minWidth: 0 },
+  priceCol: { alignItems: 'flex-end' },
+  actions: { flexDirection: 'row', columnGap: r(10) },
+  btn: { flex: 1 },
+});
+
+const makeStyles = (c: ReturnType<typeof useColors>) =>
+  StyleSheet.create({
+    badge: { fontSize: rf(13), fontWeight: fw.semi, color: c.foreground },
+    barcode: { fontSize: rf(12), color: c.foregroundSubtle, fontFamily: fontMono },
+    name: { fontSize: rf(16), fontWeight: fw.semi, color: c.foreground, lineHeight: rf(21) },
+    sub: { fontSize: rf(12.5), color: c.foregroundMuted, marginTop: r(4) },
+    price: { fontSize: rf(24), fontWeight: fw.heavy, color: c.primary, lineHeight: rf(24) },
+    caption: { fontSize: rf(11), color: c.foregroundSubtle, marginTop: r(3) },
+  });

package/src/Scanner/ScanHint.tsx

@@ -0,0 +1,38 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { Spinner, r, rf, fw } from '@unif/react-native-design';
+import { scanChrome } from './scanChrome';
+
+interface ScanHintProps {
+  detecting: boolean;
+  /** 取景态提示文案。 */
+  text: string;
+}
+
+// 取景框下方提示。识别中显示 design 的 Spinner（白）+ "识别中…"。
+export function ScanHint({ detecting, text }: ScanHintProps) {
+  return (
+    <View style={styles.row}>
+      {detecting && <Spinner size={r(15)} color={scanChrome.white} />}
+      <Text style={styles.text}>{detecting ? '识别中…' : text}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    marginTop: r(18),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    columnGap: r(7),
+  },
+  text: {
+    color: scanChrome.hintText,
+    fontSize: rf(13.5),
+    fontWeight: fw.medium,
+    letterSpacing: 0.2,
+    textShadowColor: scanChrome.textShadow,
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 6,
+  },
+});

package/src/Scanner/ScanToolbar.tsx

@@ -0,0 +1,93 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Icon, useColors, r, rf, fw, type IconName } from '@unif/react-native-design';
+import { scanChrome } from './scanChrome';
+
+interface ScanToolbarProps {
+  flash: boolean;
+  bottomInset: number;
+  onFlash: () => void;
+  onAlbum: () => void;
+}
+
+// 底部工具栏：手电筒 · 相册（按定稿，去掉了搜索 / 输入码）。点亮态用主题主色。
+export function ScanToolbar({ flash, bottomInset, onFlash, onAlbum }: ScanToolbarProps) {
+  const c = useColors();
+  return (
+    <View style={[styles.bar, { bottom: bottomInset + r(50) }]} pointerEvents="box-none">
+      <ToolbarItem
+        icon={flash ? 'flash-on' : 'flash-off'}
+        label={flash ? '已开灯' : '手电筒'}
+        activeColor={flash ? c.primary : undefined}
+        onPress={onFlash}
+      />
+      <ToolbarItem icon="image" label="相册" onPress={onAlbum} />
+    </View>
+  );
+}
+
+function ToolbarItem({
+  icon,
+  label,
+  activeColor,
+  onPress,
+}: {
+  icon: IconName;
+  label: string;
+  activeColor?: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={styles.item}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {({ pressed }) => (
+        <>
+          <View
+            style={[
+              styles.circle,
+              activeColor
+                ? { backgroundColor: activeColor, borderColor: scanChrome.glassBorderActive }
+                : { backgroundColor: scanChrome.glassDisc2, borderColor: scanChrome.glassBorder },
+              pressed && { opacity: 0.7 },
+            ]}
+          >
+            <Icon name={icon} size={r(23)} color={scanChrome.white} />
+          </View>
+          <Text style={styles.label}>{label}</Text>
+        </>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 30,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    columnGap: r(40),
+  },
+  item: { width: r(72), alignItems: 'center', rowGap: r(7) },
+  circle: {
+    width: r(54),
+    height: r(54),
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  label: {
+    fontSize: rf(12),
+    fontWeight: fw.medium,
+    color: scanChrome.toolbarLabel,
+    textShadowColor: 'rgba(0,0,0,0.4)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 4,
+  },
+});

package/src/Scanner/ScanTopBar.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Icon, r, rf, fw } from '@unif/react-native-design';
+import { scanChrome } from './scanChrome';
+
+interface ScanTopBarProps {
+  title: string;
+  topInset: number;
+  onClose?: () => void;
+  trailing?: ReactNode;
+}
+
+// 顶栏：关闭键 · 标题 · 尾部插槽。叠在深色相机预览之上，故文字/图标恒为白（不随主题）。
+// 设计稿用了毛玻璃，RN 无内建模糊，这里以半透明深色底近似（design 的 BlurLayer 需额外原生模糊库）。
+export function ScanTopBar({ title, topInset, onClose, trailing }: ScanTopBarProps) {
+  return (
+    <View style={[styles.bar, { paddingTop: topInset }]} pointerEvents="box-none">
+      <Pressable
+        onPress={onClose}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel="关闭"
+        style={({ pressed }) => [styles.disc, pressed && styles.pressed]}
+      >
+        <Icon name="close" size={r(20)} color={scanChrome.white} />
+      </Pressable>
+
+      <Text style={styles.title}>{title}</Text>
+
+      <View style={styles.trailing}>{trailing}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 30,
+    paddingHorizontal: r(14),
+    paddingBottom: r(8),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  disc: {
+    width: r(38),
+    height: r(38),
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: scanChrome.glassDisc,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: scanChrome.glassBorder,
+  },
+  pressed: { opacity: 0.6 },
+  title: {
+    color: scanChrome.white,
+    fontSize: rf(16),
+    fontWeight: fw.semi,
+    letterSpacing: 0.2,
+    textShadowColor: scanChrome.textShadow,
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 6,
+  },
+  trailing: {
+    width: r(38),
+    height: r(38),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});