@unif/react-native-camera 1.2.6 → 2.0.0

package/src/camera/Container.tsx

@@ -1,59 +1,233 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 11:24:47
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 09:33:14
- * @Description:
- * @PageName:
- */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
 import {
-  Image,
-  SafeAreaView,
-  StyleSheet,
-  TouchableNativeFeedback,
-  View,
-} from 'react-native';
-import React, { type FC, type PropsWithChildren } from 'react';
-
-const Container: FC<PropsWithChildren<{ onCancel?: () => void }>> = ({
-  children,
-  onCancel,
-}) => {
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.headerContainer}>
-        <TouchableNativeFeedback onPress={onCancel}>
-          <Image style={styles.img} source={require('../assets/close.png')} />
-        </TouchableNativeFeedback>
-      </View>
-      <View style={styles.children}>{children}</View>
-    </SafeAreaView>
-  );
+  useCameraDevice,
+  useCameraPermission,
+} from 'react-native-vision-camera';
+import { useSharedValue } from 'react-native-reanimated';
+import type { CameraResult, CustomPhotoFile, OpenConfig } from '../utils';
+import { NoCamera } from './NoCamera';
+import { NoPermission } from './NoPermission';
+import { Loading } from '../components/Loading';
+import { Camera, type CameraHandle } from './Camera';
+import { PreViewContainer } from './preview';
+import { Footer } from './footer';
+import { SetUp, type AspectRatio, type FlashMode } from './setup';
+
+const NEUTRAL_ZOOM = 1;
+
+type Props = {
+  config: OpenConfig;
+  onSettle: (r: CameraResult) => void;
 };
 
-export default Container;
+type PermissionState = 'pending' | 'granted' | 'denied';
+
+export function Container({ config, onSettle }: Props) {
+  const settledRef = useRef(false);
+
+  const settle = useCallback(
+    (r: CameraResult) => {
+      if (settledRef.current) return;
+      settledRef.current = true;
+      onSettle(r);
+    },
+    [onSettle]
+  );
+
+  useEffect(
+    () => () => {
+      if (!settledRef.current) {
+        onSettle({ code: 0, data: [], message: 'cancelled' });
+        settledRef.current = true;
+      }
+    },
+    [onSettle]
+  );
+
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const [state, setState] = useState<PermissionState>(
+    hasPermission ? 'granted' : 'pending'
+  );
+
+  useEffect(() => {
+    if (hasPermission) {
+      setState('granted');
+      return;
+    }
+    let cancelled = false;
+    // 5.x：Android 并行 requestPermission 调用会 leak coroutine（issue #3834），
+    //      必须 .catch(() => {}) 兜底；依赖 hasPermission 作为 source of truth
+    requestPermission()
+      .then((ok) => {
+        if (cancelled) return;
+        setState(ok ? 'granted' : 'denied');
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setState('denied');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [hasPermission, requestPermission]);
+
+  // 5.x：physicalDevices 字符串不带 -camera；单 'wide-angle' 规避 iOS #3773
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle'],
+  });
+
+  const cameraRef = useRef<CameraHandle>(null);
+  const [photos, setPhotos] = useState<CustomPhotoFile[]>([]);
+  const [previewing, setPreviewing] = useState(false);
+  const [recording, setRecording] = useState(false);
+  const [modeIndex, setModeIndex] = useState(0);
+  const currentMode = config.cameraMode[modeIndex];
+
+  const [flash, setFlash] = useState<FlashMode>('off');
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('4:3');
+  const zoomShared = useSharedValue(NEUTRAL_ZOOM);
+  const [lensLabel, setLensLabel] = useState(`${NEUTRAL_ZOOM.toFixed(1)}x`);
+
+  const onShutter = async () => {
+    if (currentMode?.mode === 'video') {
+      if (!recording) {
+        await cameraRef.current?.startVideo();
+        setRecording(true);
+      } else {
+        const f = await cameraRef.current?.stopVideo();
+        setRecording(false);
+        if (f) {
+          setPhotos([f]);
+          setPreviewing(true);
+        } else {
+          settle({ code: 503, data: [], message: 'video_failed' });
+        }
+      }
+      return;
+    }
+    const f = await cameraRef.current?.capture();
+    if (!f) {
+      settle({ code: 500, data: photos, message: 'capture_failed' });
+      return;
+    }
+    setPhotos((prev) => [...prev, f]);
+    if (currentMode?.mode !== 'continuous') {
+      setPreviewing(true);
+    }
+  };
+
+  if (state === 'denied') {
+    return (
+      <NoPermission
+        onCancel={() =>
+          settle({ code: 403, data: [], message: 'permission_denied' })
+        }
+        onOpenSettings={() => Linking.openSettings()}
+      />
+    );
+  }
+
+  if (state === 'pending') {
+    return (
+      <View style={styles.root} testID="permission-pending">
+        <Loading />
+      </View>
+    );
+  }
+
+  if (previewing) {
+    return (
+      <PreViewContainer
+        files={photos}
+        onRetake={() => {
+          setPhotos([]);
+          setPreviewing(false);
+        }}
+        onConfirm={() => settle({ code: 200, data: photos, message: 'ok' })}
+      />
+    );
+  }
+
+  if (device == null) {
+    return (
+      <NoCamera
+        onCancel={() => settle({ code: 404, data: [], message: 'no_device' })}
+      />
+    );
+  }
+
+  if (currentMode == null) {
+    return (
+      <NoCamera
+        onCancel={() =>
+          settle({ code: 500, data: [], message: 'invalid_config' })
+        }
+      />
+    );
+  }
+
+  const onToggleLens = () => {
+    if (lensLabel.startsWith(device.minZoom.toFixed(1))) {
+      zoomShared.value = NEUTRAL_ZOOM;
+      setLensLabel(`${NEUTRAL_ZOOM.toFixed(1)}x`);
+    } else {
+      zoomShared.value = device.minZoom;
+      setLensLabel(`${device.minZoom.toFixed(1)}x`);
+    }
+  };
+
+  return (
+    <View style={styles.root} testID="device-ready">
+      <Camera
+        ref={cameraRef}
+        device={device}
+        currentMode={currentMode}
+        flash={flash}
+        aspectRatio={aspectRatio}
+        zoomShared={zoomShared}
+      />
+      {!previewing && (
+        <SetUp
+          flash={flash}
+          aspectRatio={aspectRatio}
+          onChangeFlash={setFlash}
+          onChangeAspectRatio={setAspectRatio}
+          onToggleLens={onToggleLens}
+          lensLabel={lensLabel}
+        />
+      )}
+      <Footer
+        modes={config.cameraMode}
+        currentIndex={modeIndex}
+        recording={recording}
+        onShutter={onShutter}
+        onSelectMode={(i) => {
+          if (config.dataRetainedMode === 'clear' && i !== modeIndex) {
+            setPhotos([]);
+          }
+          setModeIndex(i);
+        }}
+        onCancel={() => settle({ code: 0, data: [], message: 'cancelled' })}
+        onFinishBurst={
+          currentMode?.mode === 'continuous'
+            ? () => setPreviewing(true)
+            : undefined
+        }
+        burstCount={
+          currentMode?.mode === 'continuous' ? photos.length : undefined
+        }
+      />
+    </View>
+  );
+}
 
 const styles = StyleSheet.create({
-  modal: {
-    flex: 1,
-    margin: 0,
-    backgroundColor: '#fff',
-  },
-  container: { flex: 1 },
-  headerContainer: {
-    marginHorizontal: 12,
-    marginBottom: 12,
-    height: 25,
-    display: 'flex',
-    alignItems: 'flex-end',
-  },
-  img: {
-    width: 25,
-    height: 25,
-  },
-  children: {
-    display: 'flex',
+  root: {
     flex: 1,
+    // 相机主容器固定黑底:相机 UX 惯例(预览 / 拍照取景需要黑底凸显),
+    // 不走 c.background token.
+    backgroundColor: '#000',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/camera/Error.tsx

@@ -1,28 +1,27 @@
-import { Button, StyleSheet, Text, View } from 'react-native';
-import React from 'react';
-import type { CameraRuntimeError } from 'react-native-vision-camera';
+import { StyleSheet, View } from 'react-native';
+import {
+  Empty,
+  r,
+  useThemedStyles,
+  type ColorTokens,
+} from '@unif/react-native-design';
 
-const Error: React.FC<{ data?: CameraRuntimeError; onPress?: () => void }> = ({
-  data,
-  onPress,
-}) => {
+export function ErrorView({ message }: { message: string }) {
+  const styles = useThemedStyles(makeStyles);
   return (
-    <View style={styles.main}>
-      <Button onPress={onPress} title="关闭" />
-      <Text>code:{data?.code}||''错误</Text>
-      <Text>message:{data?.message}||错误</Text>
-      <Text>cause:{JSON.stringify(data?.cause)}</Text>
+    <View style={styles.root} testID="error-view">
+      <Empty icon="error-alert" title={message} />
     </View>
   );
-};
+}
 
-export default Error;
-
-const styles = StyleSheet.create({
-  main: {
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: r(24),
+      backgroundColor: c.background,
+    },
+  });

package/src/camera/FocusIndicator.tsx

@@ -1,70 +1,60 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 13:48:40
- * @LastEditors: 刘利军
- * @LastEditTime: 2025-01-17 08:44:43
- * @Description: 聚焦指示器组件
- * @PageName:
- */
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { r } from '@unif/react-native-design';
+import type { Point } from '../utils';
 
-import { StyleSheet, Animated } from 'react-native';
-import React, { useRef, useEffect } from 'react';
+type Props = { point: Point; onAnimationEnd: () => void };
 
-interface FocusIndicatorProps {
-  x: number;
-  y: number;
-}
+const SIZE = r(80);
 
-const FocusIndicator: React.FC<FocusIndicatorProps> = ({ x, y }) => {
-  const scale = useRef(new Animated.Value(1.2));
-  const opacity = useRef(new Animated.Value(1));
+export function FocusIndicator({ point, onAnimationEnd }: Props) {
+  const scale = useRef(new Animated.Value(1.6)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    scale.current.setValue(1.2);
-    opacity.current.setValue(1);
-
     Animated.parallel([
-      Animated.timing(scale.current, {
+      Animated.timing(scale, {
         toValue: 1,
         duration: 200,
         useNativeDriver: true,
       }),
-      Animated.timing(opacity.current, {
-        toValue: 0,
-        duration: 500,
-        delay: 400,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [x, y]);
-
-  const size = 70;
+      Animated.sequence([
+        Animated.delay(600),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]),
+    ]).start(() => onAnimationEnd());
+  }, [scale, opacity, onAnimationEnd]);
 
   return (
     <Animated.View
       style={[
-        styles.focusIndicator,
+        styles.box,
         {
-          left: x - size / 2,
-          top: y - size / 2,
-          width: size,
-          height: size,
-          transform: [{ scale: scale.current }],
-          opacity: opacity.current,
+          left: point.x - SIZE / 2,
+          top: point.y - SIZE / 2,
+          transform: [{ scale }],
+          opacity,
         },
       ]}
+      pointerEvents="none"
+      testID="focus-indicator"
     />
   );
-};
-
-export default FocusIndicator;
+}
 
 const styles = StyleSheet.create({
-  focusIndicator: {
+  box: {
     position: 'absolute',
-    borderRadius: 35,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    zIndex: 999,
-    elevation: 10,
+    width: SIZE,
+    height: SIZE,
+    borderWidth: 1.5,
+    // 对焦黄框:相机 UX 惯例(iOS / Android 系统相机统一用饱和黄高对比度),
+    // 不走主题 token —— 任何主题下都需要在镜头预览(黑底为主)上一眼可见.
+    borderColor: 'yellow',
+    borderRadius: r(6),
   },
 });

package/src/camera/ModalView.tsx

@@ -1,31 +1,33 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-10 10:56:25
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 16:02:36
- * @Description:
- * @PageName:
- */
-import { Modal, StyleSheet } from 'react-native';
-import React, { type PropsWithChildren } from 'react';
+import React from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ThemeProvider } from '@unif/react-native-design';
 
-const ModalView: React.FC<PropsWithChildren<{ visible: boolean }>> = ({
-  children,
-  visible,
-}) => {
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export function ModalView({ visible, onClose, children }: Props) {
   return (
-    <Modal style={styles.modal} animationType="slide" visible={visible}>
-      {children}
+    <Modal
+      visible={visible}
+      animationType="slide"
+      statusBarTranslucent
+      onRequestClose={onClose}
+      testID="camera-modal"
+    >
+      <SafeAreaProvider>
+        <ThemeProvider>
+          <View style={styles.root}>{children}</View>
+        </ThemeProvider>
+      </SafeAreaProvider>
     </Modal>
   );
-};
-
-export default ModalView;
+}
 
 const styles = StyleSheet.create({
-  modal: {
-    flex: 1,
-    margin: 0,
-    backgroundColor: '#000',
-  },
+  // 相机 Modal 根视图固定黑底:相机 UX 惯例,与 Container / 预览系列一致.
+  root: { flex: 1, backgroundColor: '#000' },
 });

package/src/camera/NoCamera.tsx

@@ -1,16 +1,39 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-10 10:56:25
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-01-17 16:34:19
- * @Description:
- * @PageName:
- */
-import { Text } from 'react-native';
-import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Button,
+  Empty,
+  r,
+  useThemedStyles,
+  type ColorTokens,
+} from '@unif/react-native-design';
 
-const NoCamera: React.FC = () => {
-  return <Text>未检测到摄像头,请重试!</Text>;
-};
+type Props = { onCancel: () => void };
 
-export default NoCamera;
+export function NoCamera({ onCancel }: Props) {
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.root} testID="no-camera">
+      <Empty icon="camera-off" title="未检测到可用相机" />
+      <View style={styles.row}>
+        <Button
+          variant="primary"
+          label="关闭"
+          onPress={onCancel}
+          testID="close-btn"
+        />
+      </View>
+    </View>
+  );
+}
+
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: r(24),
+      backgroundColor: c.background,
+    },
+    row: { marginTop: r(16) },
+  });

package/src/camera/NoPermission.tsx

@@ -1,43 +1,51 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-10 10:56:25
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-01-16 13:55:15
- * @Description:
- * @PageName:
- */
-import { Linking, View, Text, StyleSheet } from 'react-native';
-import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Button,
+  Empty,
+  r,
+  useThemedStyles,
+  type ColorTokens,
+} from '@unif/react-native-design';
 
-const NoPermission: React.FC = () => {
+type Props = { onCancel: () => void; onOpenSettings?: () => void };
+
+export function NoPermission({ onCancel, onOpenSettings }: Props) {
+  const styles = useThemedStyles(makeStyles);
   return (
-    <View>
-      <View>
-        <Text style={{ ...styles.fontSize }}>未获得授权，</Text>
-      </View>
-      <View>
-        <Text style={{ ...styles.fontSize }}>
-          需要访问相机或麦克风权限，
-          <Text
-            style={{ ...styles.fontSize, ...styles.on }}
-            onPress={async () => {
-              const res = await Linking.openSettings();
-              console.log('res', res);
-            }}
-          >
-            去开启＞
-          </Text>
-        </Text>
+    <View style={styles.root} testID="no-permission">
+      <Empty
+        icon="permission-denied"
+        title="相机权限被拒"
+        desc="请前往系统设置开启权限"
+      />
+      <View style={styles.row}>
+        <Button
+          variant="ghost"
+          label="取消"
+          onPress={onCancel}
+          testID="cancel-btn"
+        />
+        {onOpenSettings && (
+          <Button
+            variant="primary"
+            label="去设置"
+            onPress={onOpenSettings}
+            testID="open-settings-btn"
+          />
+        )}
       </View>
     </View>
   );
-};
-
-export default NoPermission;
+}
 
-const styles = StyleSheet.create({
-  fontSize: { textAlign: 'center', marginBottom: 6, fontSize: 15 },
-  on: {
-    color: '#FF7600',
-  },
-});
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: r(24),
+      backgroundColor: c.background,
+    },
+    row: { flexDirection: 'row', gap: r(16), marginTop: r(16) },
+  });

package/src/camera/capturePhotoHelper.ts

@@ -0,0 +1,37 @@
+import type {
+  CameraPhotoOutput,
+  CapturePhotoSettings,
+  CameraOrientation,
+} from 'react-native-vision-camera';
+
+export type CapturedPhotoRaw = {
+  path: string;
+  width: number;
+  height: number;
+  orientation: CameraOrientation;
+};
+
+/**
+ * 5.x 拍照标准序列：
+ *   1. await photoOutput.capturePhoto(settings, {})
+ *   2. await photo.saveToTemporaryFileAsync()
+ *   3. 读 photo.width / photo.height / photo.orientation
+ *   4. photo.dispose() (try/finally 保护)
+ */
+export async function capturePhotoToFile(
+  photoOutput: CameraPhotoOutput,
+  settings: CapturePhotoSettings
+): Promise<CapturedPhotoRaw> {
+  const photo = await photoOutput.capturePhoto(settings, {});
+  try {
+    const path = await photo.saveToTemporaryFileAsync();
+    return {
+      path,
+      width: photo.width,
+      height: photo.height,
+      orientation: photo.orientation,
+    };
+  } finally {
+    photo.dispose();
+  }
+}