@unif/react-native-camera 1.0.0

package/src/camera/Camera.tsx

@@ -0,0 +1,236 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-09 16:27:07
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 14:59:37
+ * @Description:
+ * @PageName:
+ */
+import { StyleSheet } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
+import NoCamera from './NoCamera';
+
+import {
+  type CameraBack,
+  type CameraMode,
+  type CameraProps,
+  type CameraType,
+  type CustomPhotoFile,
+  type FlashMode,
+} from '../utils';
+import { Footer } from './footer';
+import { SetUp } from './setup';
+import { PreView, PreViewContainer, SinglePre } from './preview';
+import { SAFE_AREA_PADDING } from '../utils';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useConfirm } from '../hooks';
+
+export const PhotoAspectRatio: { [key: number]: number } = {
+  4: 4 / 3,
+  16: 16 / 9,
+};
+
+let enableShutterSound = false;
+let flash: FlashMode = 'off';
+const Camera: React.FC<{
+  data: CameraProps;
+  visible: boolean;
+  back: () => void;
+  onChange: (data: CameraBack) => void;
+}> = ({ visible, data, back, onChange }) => {
+  const { cameraMode, dataRetainedMode } = data;
+
+  const [position, setPosition] = useState<CameraType>('front');
+  const [isActive, setIsActive] = useState(false);
+  const [preVis, setPreVis] = useState(false);
+
+  const device = useCameraDevice(position, {
+    physicalDevices: [
+      'ultra-wide-angle-camera',
+      'wide-angle-camera',
+      'telephoto-camera',
+    ],
+  });
+
+  const [aspectRatio, setAspectRatio] = useState<number>(16);
+  const [resizeMode, setResizeMode] = useState<
+    'cover' | 'contain' | undefined
+  >();
+
+  const [zoom, setZoom] = useState(device?.neutralZoom);
+
+  const format = useCameraFormat(device, [
+    { photoAspectRatio: PhotoAspectRatio[aspectRatio] },
+    { videoAspectRatio: PhotoAspectRatio[aspectRatio] },
+  ]);
+  const camera = useRef<VisionCamera>(null);
+  const [photos, setPhotos] = useState<CustomPhotoFile[]>([]);
+  const [mode, setMode] = useState(cameraMode[0]?.mode as CameraMode);
+
+  const { confirmApi, contextHolder } = useConfirm();
+
+  useEffect(() => {
+    setIsActive(visible);
+  }, [visible]);
+
+  if (device == null) {
+    return <NoCamera />;
+  }
+
+  const commonBack = () => {
+    setPreVis(false);
+    setIsActive(true);
+  };
+  const signleBack = () => {
+    setPhotos([]);
+    commonBack();
+  };
+
+  const isSingle = () => dataRetainedMode === 'clear' && mode === 'single';
+  const showPreview = () => {
+    setIsActive(false);
+    setPreVis(true);
+  };
+  const showVideo = () => cameraMode.some((item) => item.mode === 'video');
+
+  const confirm = () => {
+    onChange({
+      code: 200,
+      data: photos.map((item) => ({
+        id: new Date().getTime().toString(),
+        file: item.path,
+        cameraType: position,
+      })),
+      message: '保存成功',
+    });
+  };
+  return (
+    <GestureHandlerRootView>
+      <VisionCamera
+        zoom={zoom}
+        format={format}
+        ref={camera}
+        style={styles.camera}
+        device={device}
+        isActive={isActive}
+        enableZoomGesture={true}
+        photoQualityBalance="balanced"
+        photo={cameraMode.some(
+          (item) => item.mode === 'single' || item.mode === 'continuous'
+        )}
+        video={showVideo()}
+        audio={showVideo()}
+        resizeMode={resizeMode}
+      />
+
+      <SetUp
+        isMultiCam={device?.isMultiCam}
+        onChange={(val) => (flash = val)}
+        onAspectRationChange={setAspectRatio}
+        onScreenChange={setResizeMode}
+        onVolumeChange={(val) => (enableShutterSound = val)}
+        onFishEyeOpen={(val) => {
+          if (val === 'fishEye') {
+            setZoom(device.minZoom);
+          }
+          if (val === 'default') {
+            setZoom(device.neutralZoom);
+          }
+        }}
+      />
+      <Footer
+        cameraMode={cameraMode}
+        photos={photos}
+        backPress={async () => {
+          if (photos.length > 0) {
+            const isBack = await confirmApi.open({
+              text: '返回会清空已拍摄数据,请确认!',
+            });
+            if (isBack) {
+              back();
+            }
+          } else {
+            back();
+          }
+        }}
+        thumbnailPress={showPreview}
+        onChange={(val) => {
+          if (dataRetainedMode === 'clear') {
+            setPhotos([]);
+          }
+          setMode(val);
+        }}
+        takePress={async () => {
+          const photo = await camera.current?.takePhoto({
+            flash,
+            enableShutterSound: enableShutterSound,
+          });
+          if (photo) {
+            setPhotos((p) => [...p, { ...photo, mode }]);
+          }
+          if (isSingle()) {
+            showPreview();
+          }
+        }}
+        savePress={() => {
+          confirm();
+        }}
+        rotatePress={() => {
+          setPosition((val) => {
+            if (val === 'back') {
+              return 'front';
+            }
+            return 'back';
+          });
+        }}
+      />
+
+      <PreViewContainer visible={preVis}>
+        {isSingle() ? (
+          <SinglePre
+            uri={photos[0]?.path as string}
+            onBack={() => signleBack()}
+            onSave={() => confirm()}
+          />
+        ) : (
+          <PreView
+            cameraMode={cameraMode}
+            data={photos}
+            onBack={() => commonBack()}
+            onDel={async (snapItem) => {
+              const isConfirm = await confirmApi.open({
+                text: '图片删除后无法恢复,请确认!',
+              });
+              if (isConfirm) {
+                setPhotos((photoList) => {
+                  return photoList.filter(
+                    (photo) => photo.path !== snapItem?.path
+                  );
+                });
+                return isConfirm;
+              }
+              return isConfirm;
+            }}
+          />
+        )}
+      </PreViewContainer>
+      {contextHolder}
+    </GestureHandlerRootView>
+  );
+};
+
+export default Camera;
+
+const styles = StyleSheet.create({
+  camera: { flex: 1 },
+  captureButton: {
+    position: 'absolute',
+    alignSelf: 'center',
+    bottom: SAFE_AREA_PADDING.paddingBottom,
+  },
+});

package/src/camera/Container.tsx

@@ -0,0 +1,60 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-02 11:24:47
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 09:33:14
+ * @Description:
+ * @PageName:
+ */
+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>
+  );
+};
+
+export default Container;
+
+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',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/camera/ModalView.tsx

@@ -0,0 +1,28 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-10 10:56:25
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-18 13:52:49
+ * @Description:
+ * @PageName:
+ */
+import { Modal, StyleSheet } from 'react-native';
+import React from 'react';
+
+const ModalView: React.FC<{ visible: boolean }> = ({ children, visible }) => {
+  return (
+    <Modal style={styles.modal} animationType="slide" visible={visible}>
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalView;
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+    margin: 0,
+    backgroundColor: '#000',
+  },
+});

package/src/camera/NoCamera.tsx

@@ -0,0 +1,16 @@
+/*
+ * @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';
+
+const NoCamera: React.FC = () => {
+  return <Text>未检测到摄像头!</Text>;
+};
+
+export default NoCamera;

package/src/camera/NoPermission.tsx

@@ -0,0 +1,43 @@
+/*
+ * @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';
+
+const NoPermission: React.FC = () => {
+  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>
+    </View>
+  );
+};
+
+export default NoPermission;
+
+const styles = StyleSheet.create({
+  fontSize: { textAlign: 'center', marginBottom: 6, fontSize: 15 },
+  on: {
+    color: '#FF7600',
+  },
+});

package/src/camera/footer/Footer.tsx

@@ -0,0 +1,196 @@
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import React, { useState } from 'react';
+import { SAFE_AREA_PADDING } from '../../utils';
+import {
+  CameraModeEnum,
+  type CameraMode,
+  type CameraModeType,
+} from '../../utils';
+import { Back, Rotate, PreviewThumbnail } from '../../components';
+import type { PhotoFile } from 'react-native-vision-camera';
+
+const Take = require('../../assets/home/take.png');
+
+const Footer: React.FC<{
+  cameraMode: CameraModeType[];
+  photos: PhotoFile[];
+  backPress?: (event: GestureResponderEvent) => void;
+  thumbnailPress?: (event: GestureResponderEvent) => void;
+  savePress?: (event: GestureResponderEvent) => void;
+  rotatePress?: (event: GestureResponderEvent) => void;
+  takePress?: (event: GestureResponderEvent) => void;
+  onChange?: (val: CameraMode) => void;
+}> = ({
+  cameraMode,
+  photos,
+  backPress,
+  thumbnailPress,
+  takePress,
+  savePress,
+  rotatePress,
+  onChange,
+}) => {
+  const isPhotos = () => photos.length > 0;
+  const [stateText, setStateText] = useState('');
+  const back = (e: GestureResponderEvent) => {
+    backPress && backPress(e);
+  };
+  const [mode, setMode] = useState<CameraMode | undefined>(cameraMode[0]?.mode);
+  return (
+    <View style={styles.footer}>
+      {stateText ? (
+        <View>
+          <Text style={styles.stateText}>{stateText}</Text>
+        </View>
+      ) : (
+        <>
+          <View style={styles.footerTop}>
+            {cameraMode.map((item) => {
+              return (
+                <TouchableOpacity
+                  key={item.mode}
+                  style={[
+                    styles.footerTopText,
+                    item.mode === mode
+                      ? styles.footerTopTextSelected
+                      : undefined,
+                  ]}
+                  onPress={() => {
+                    if (item.mode !== mode) {
+                      setMode(item.mode);
+                    }
+                    if (cameraMode.length > 1) {
+                      onChange && onChange(item.mode);
+                    }
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.footerTopTextColor,
+                      item.mode === mode
+                        ? styles.footerTopTextSelected
+                        : undefined,
+                    ]}
+                  >
+                    {CameraModeEnum[item.mode]}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+          <View style={styles.footerBottom}>
+            <View style={styles.footerHorizontal}>
+              {isPhotos() ? (
+                <PreviewThumbnail
+                  uri={`file://${photos[photos.length - 1]?.path}`}
+                  onPress={thumbnailPress}
+                />
+              ) : (
+                <Back onPress={back} />
+              )}
+            </View>
+            <View style={styles.footerCenter}>
+              {isPhotos() && (
+                <Text style={styles.back} onPress={back}>
+                  返回
+                </Text>
+              )}
+              <TouchableOpacity onPress={takePress}>
+                <Image source={Take} style={styles.image} />
+              </TouchableOpacity>
+              {isPhotos() && (
+                <Text
+                  style={styles.save}
+                  onPress={(e) => {
+                    setStateText('保存中...');
+                    savePress && savePress(e);
+                  }}
+                >
+                  保存
+                </Text>
+              )}
+            </View>
+            <View style={styles.footerHorizontal}>
+              <Rotate onPress={rotatePress} />
+            </View>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default Footer;
+
+const styles = StyleSheet.create({
+  image: { width: 62, height: 62 },
+  stateText: {
+    textAlign: 'center',
+    color: '#fff',
+  },
+  footer: {
+    ...StyleSheet.absoluteFillObject,
+    top: undefined,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    paddingTop: 6,
+    paddingBottom: SAFE_AREA_PADDING.paddingBottom + 6,
+    display: 'flex',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    paddingHorizontal: 16,
+  },
+  footerBottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  footerHorizontal: { width: 34, height: 34 },
+  footerCenter: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  footerTop: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingBottom: 6,
+  },
+  footerTopText: {
+    paddingVertical: 6,
+    paddingHorizontal: 24,
+    marginHorizontal: 2,
+    borderRadius: 10,
+  },
+  footerTopTextColor: {
+    color: '#fff',
+    borderRadius: 10,
+    fontSize: 16,
+  },
+  footerTopTextSelected: {
+    color: '#E96C00',
+    borderRadius: 10,
+  },
+  save: {
+    flex: 1,
+    paddingVertical: 24,
+    marginLeft: 24,
+    color: '#fff',
+    textAlign: 'left',
+  },
+  back: {
+    paddingVertical: 24,
+    flex: 1,
+    textAlign: 'right',
+    color: '#fff',
+    marginRight: 24,
+  },
+});

package/src/camera/footer/index.tsx

@@ -0,0 +1,2 @@
+import Footer from './Footer';
+export { Footer };

package/src/camera/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-12 13:44:47
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 13:08:44
+ * @Description:
+ * @PageName:
+ */
+import Camera from './Camera';
+import NoCamera from './NoCamera';
+import NoPermission from './NoPermission';
+import ModalView from './ModalView';
+export { Camera, NoCamera, NoPermission, ModalView };

package/src/camera/preview/PreView.tsx

@@ -0,0 +1,111 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-02 13:37:36
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 13:03:12
+ * @Description:
+ * @PageName:
+ */
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useState } from 'react';
+
+import { CameraModeEnum, type CameraModeType } from '../../utils';
+import { Back, Delete, MyCarousel } from '../../components';
+import { pxToDpWidth, type CustomPhotoFile } from '../../utils';
+import PreviewFooter from './PreviewFooter';
+
+import { styles as singleStyles, type CommonProps } from './SinglePre';
+const PreView: React.FC<
+  {
+    cameraMode: CameraModeType[];
+    data: CustomPhotoFile[];
+  } & CommonProps
+> = ({ cameraMode, data, onBack, onDel }) => {
+  const [mode, setMode] = useState(data[0]?.mode);
+  const showData = data.filter((item) => item.mode === mode);
+  const [snapToIndex, setSnapToIndex] = useState<number>(0);
+  return (
+    <View style={styles.container}>
+      <View style={styles.mode}>
+        {cameraMode
+          .filter((item) => {
+            return data.some((dItem) => {
+              return item.mode === dItem.mode;
+            });
+          })
+          .map((item, index) => {
+            return (
+              <TouchableOpacity
+                style={styles.modeItem}
+                key={`${item.mode}_${index}`}
+                onPress={() => setMode(item.mode)}
+              >
+                <Text
+                  style={[
+                    styles.modeText,
+                    item.mode === mode ? styles.modeTextSelected : undefined,
+                  ]}
+                >
+                  {CameraModeEnum[item.mode]}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+      </View>
+      <View style={{ paddingHorizontal: pxToDpWidth(34) }}>
+        <MyCarousel data={showData} onSnapToItem={setSnapToIndex} />
+      </View>
+      <View style={singleStyles.footer}>
+        <PreviewFooter
+          actions={[
+            <Back
+              key="back"
+              style={singleStyles.image}
+              text="返回"
+              onPress={onBack}
+            />,
+            <Delete
+              key="del"
+              style={singleStyles.image}
+              text="删除"
+              onPress={async () => {
+                if (onDel) {
+                  const isDel = await onDel(showData[snapToIndex]);
+                  if (isDel && snapToIndex > 0) {
+                    setSnapToIndex((val) => val - 1);
+                  }
+                }
+              }}
+            />,
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default PreView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#3C3A3E',
+  },
+  mode: {
+    flexDirection: 'row',
+    marginVertical: pxToDpWidth(24),
+  },
+  modeItem: {
+    padding: 10,
+  },
+  modeText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 400,
+  },
+  modeTextSelected: {
+    color: '#E96C00',
+    fontSize: 16,
+    fontWeight: 500,
+  },
+});