@unif/react-native-camera 1.0.0

package/src/components/Loading.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  Easing,
+  withRepeat,
+  withTiming,
+  useSharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { pxToDpWidth } from '../utils';
+
+const Loading: React.FC = () => {
+  const firstDotScale = useSharedValue(0);
+  const secondDotScale = useSharedValue(0);
+  const thirdDotScale = useSharedValue(0);
+
+  useEffect(() => {
+    // 创建动画：依次跳动
+    firstDotScale.value = withRepeat(
+      withTiming(1, { duration: 500, easing: Easing.ease }),
+      -1,
+      true
+    );
+
+    secondDotScale.value = withRepeat(
+      withTiming(1, { duration: 500, easing: Easing.ease }),
+      -1,
+      true
+    );
+
+    thirdDotScale.value = withRepeat(
+      withTiming(1, { duration: 500, easing: Easing.ease }),
+      -1,
+      true
+    );
+  }, [firstDotScale, secondDotScale, thirdDotScale]);
+
+  // 使用 useAnimatedStyle 来绑定动画到样式上
+  const animatedStyle1 = useAnimatedStyle(() => ({
+    transform: [{ scale: firstDotScale.value }],
+  }));
+
+  const animatedStyle2 = useAnimatedStyle(() => ({
+    transform: [{ scale: secondDotScale.value }],
+  }));
+
+  const animatedStyle3 = useAnimatedStyle(() => ({
+    transform: [{ scale: thirdDotScale.value }],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.dot, animatedStyle1]} />
+      <Animated.View style={[styles.dot, animatedStyle2]} />
+      <Animated.View style={[styles.dot, animatedStyle3]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  dot: {
+    width: pxToDpWidth(20),
+    height: pxToDpWidth(20),
+    borderRadius: 10,
+    backgroundColor: '#FF7600',
+    margin: 5,
+  },
+});
+
+export default Loading;

package/src/components/Modal/Confirm.tsx

@@ -0,0 +1,115 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-18 13:55:41
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 11:33:36
+ * @Description:
+ * @PageName:
+ */
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useState } from 'react';
+import { pxToDpWidth } from '../../utils';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import LoadingDots from '../Loading';
+
+const Confirm: React.FC<{
+  onCancel: () => Promise<void> | void;
+  onConfirm: () => Promise<void> | void;
+  text?: string;
+  title?: string;
+}> = ({ onCancel, onConfirm, text, title }) => {
+  const [loading, setLoading] = useState(false);
+  const click = async (reset = false) => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    if (reset) {
+      await onConfirm();
+    } else {
+      await onCancel();
+    }
+    setLoading(false);
+  };
+  return (
+    <Animated.View style={styles.modal} entering={FadeIn} exiting={FadeOut}>
+      <View style={styles.container}>
+        <Text style={[styles.text, styles.title]}>{title || '确认提醒'}</Text>
+        <Text style={[styles.text, styles.des]}>{text}</Text>
+        <View style={styles.footer}>
+          {loading ? (
+            <LoadingDots />
+          ) : (
+            <>
+              <TouchableOpacity
+                style={styles.btn}
+                onPress={async () => await click(false)}
+              >
+                <Text style={styles.btnText}>取消</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.btn}
+                onPress={async () => await click(true)}
+              >
+                <Text style={[styles.btnText, styles.btnTextConfirm]}>
+                  确定
+                </Text>
+              </TouchableOpacity>
+            </>
+          )}
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
+
+export default Confirm;
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  container: {
+    backgroundColor: '#fff',
+    width: '80%',
+    borderRadius: 10,
+    paddingVertical: 12,
+  },
+  text: {
+    textAlign: 'center',
+    paddingHorizontal: pxToDpWidth(12),
+    color: '#010101',
+  },
+  title: {
+    fontSize: pxToDpWidth(30),
+    fontWeight: '500',
+  },
+  des: {
+    fontWeight: '400',
+    fontSize: pxToDpWidth(26),
+    marginTop: pxToDpWidth(24),
+    marginBottom: pxToDpWidth(36),
+  },
+  footer: {
+    paddingTop: pxToDpWidth(24),
+    borderTopWidth: 0.5,
+    borderTopColor: '#D4D4D4',
+    flexDirection: 'row',
+  },
+  btn: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  btnText: {
+    fontSize: pxToDpWidth(30),
+    fontWeight: '400',
+    color: '#666',
+  },
+  btnTextConfirm: {
+    color: '#FF7600',
+  },
+});

package/src/components/Modal/index.tsx

@@ -0,0 +1,3 @@
+import Confirm from './Confirm';
+
+export { Confirm };

package/src/components/PreviewThumbnail.tsx

@@ -0,0 +1,40 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-02-26 14:42:00
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-17 11:33:28
+ * @Description:
+ * @PageName: 左侧预览
+ */
+import {
+  StyleSheet,
+  TouchableOpacity,
+  type ImageStyle,
+  Image,
+  type GestureResponderEvent,
+} from 'react-native';
+import React from 'react';
+
+export type PreviewThumbnailProps = {
+  uri: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: ImageStyle;
+};
+
+const PreviewThumbnail: React.FC<PreviewThumbnailProps> = ({
+  onPress,
+  uri,
+  style,
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Image source={{ uri }} style={{ ...styles.image, ...style }} />
+    </TouchableOpacity>
+  );
+};
+
+export default PreviewThumbnail;
+
+const styles = StyleSheet.create({
+  image: { width: '100%', height: '100%', borderRadius: 5 },
+});

package/src/components/Rotate.tsx

@@ -0,0 +1,32 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-16 17:51:36
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 09:45:43
+ * @Description:
+ * @PageName:
+ */
+import {
+  Image,
+  TouchableOpacity,
+  type ImageStyle,
+  type GestureResponderEvent,
+} from 'react-native';
+import React from 'react';
+import { styles } from './Back';
+export type RotateProps = {
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: ImageStyle;
+};
+const Rotate: React.FC<RotateProps> = ({ onPress, style }) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Image
+        source={require('../assets/preview/rotate.png')}
+        style={[styles.image, style]}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default Rotate;

package/src/components/Save.tsx

@@ -0,0 +1,37 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-16 17:50:24
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 10:24:18
+ * @Description:
+ * @PageName:
+ */
+import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+
+import { type RotateProps } from './Rotate';
+const Save: React.FC<RotateProps & { text?: string }> = ({
+  onPress,
+  style,
+  text,
+}) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <Image
+        source={require('../assets/preview/save.png')}
+        style={[styles.image, style]}
+      />
+      {text && <Text style={styles.text}>{text}</Text>}
+    </TouchableOpacity>
+  );
+};
+
+export default Save;
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  image: { width: 34, height: 34, marginBottom: 4 },
+  text: { color: '#fff' },
+});

package/src/components/index.tsx

@@ -0,0 +1,8 @@
+import PreviewThumbnail from './PreviewThumbnail';
+import Rotate from './Rotate';
+import Back from './Back';
+import Delete from './Delete';
+import Save from './Save';
+export * from './Carousel';
+export * from './Modal';
+export { Back, Rotate, PreviewThumbnail, Delete, Save };

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-17 16:29:43
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-18 15:13:08
+ * @Description:
+ * @PageName:
+ */
+import useCreation from './useCreation';
+import useConfirm from './useConfirm';
+
+export { useCreation, useConfirm };

package/src/hooks/useCamera.tsx/index.tsx

@@ -0,0 +1,96 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-17 16:31:19
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 14:58:46
+ * @Description:
+ * @PageName:
+ */
+
+import React, { useRef, useState } from 'react';
+import { Camera, NoPermission, NoCamera, ModalView } from '../../camera';
+import type { CameraBack, CameraProps, CameraRef } from '../../utils';
+import {
+  useCameraDevice,
+  useCameraPermission,
+  useMicrophonePermission,
+} from 'react-native-vision-camera';
+import { DefaultData } from '../../utils';
+import Container from '../../camera/Container';
+
+const useCamera = (): [CameraRef, React.ReactElement] => {
+  const [cameraConfig, setCameraConfig] = useState<CameraProps>(DefaultData);
+  const [visible, setVisible] = useState(false);
+
+  const close = (
+    data: CameraBack = { code: 200, data: [], message: '返回' }
+  ) => {
+    setVisible(false);
+    ref.current.resolvePromise(data);
+  };
+  const ref = useRef<{
+    resolvePromise: (data: CameraBack) => void;
+  }>({
+    resolvePromise: () => {},
+  });
+  const api = React.useMemo<CameraRef>(() => {
+    return {
+      open: async (config) => {
+        setVisible(true);
+        setCameraConfig((val) => ({
+          ...val,
+          ...config,
+        }));
+        return new Promise<CameraBack>((resolve) => {
+          ref.current.resolvePromise = resolve;
+        });
+      },
+      close: () => close(),
+    };
+  }, []);
+
+  const isVideo = (cameraConfig?.cameraMode || []).some(
+    (item) => item.mode === 'video'
+  );
+
+  const device = useCameraDevice('front');
+  // 相机权限请求
+  const { hasPermission, requestPermission } = useCameraPermission();
+  // 麦克风权限
+  const {
+    hasPermission: hasMicroPermission,
+    requestPermission: hasRequestMicroPermission,
+  } = useMicrophonePermission();
+
+  let Holder = (
+    <Camera
+      data={cameraConfig}
+      visible={visible}
+      back={() => close()}
+      onChange={(val) => close(val)}
+    />
+  );
+  if (visible) {
+    if (!hasPermission) {
+      requestPermission();
+      Holder = (
+        <Container onCancel={() => close()}>
+          <NoPermission />
+        </Container>
+      );
+    } else if (isVideo && !hasMicroPermission) {
+      hasRequestMicroPermission();
+      Holder = (
+        <Container onCancel={() => close()}>
+          <NoPermission />
+        </Container>
+      );
+    } else if (device == null) {
+      Holder = <NoCamera />;
+    }
+  }
+
+  return [api, <ModalView visible={visible}>{Holder}</ModalView>];
+};
+
+export default useCamera;

package/src/hooks/useConfirm.tsx

@@ -0,0 +1,58 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-17 16:28:56
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-18 16:05:43
+ * @Description:
+ * @PageName:
+ */
+import React, { useRef, useState } from 'react';
+import type { ConfirmConfigProps, ConfirmRef } from '../utils';
+import { Confirm } from '../components';
+
+export default function useConfirm() {
+  const [visible, setVisible] = useState(false);
+  const [config, setConfig] = useState<ConfirmConfigProps>();
+  const close = () => {
+    setVisible(false);
+  };
+
+  const ref = useRef<{ resolvePromise: (confirmed: boolean) => void }>({
+    resolvePromise: () => {},
+  });
+
+  const confirmApi = React.useMemo<ConfirmRef>(() => {
+    return {
+      open: async (openConfig) => {
+        setConfig(openConfig);
+        setVisible(true);
+        return new Promise<boolean>((resolve) => {
+          ref.current.resolvePromise = resolve;
+        });
+      },
+      close: () => close(),
+    };
+  }, []);
+
+  let contextHolder = null;
+  if (visible) {
+    contextHolder = (
+      <Confirm
+        title={config?.title}
+        text={config?.text}
+        onCancel={() => {
+          close();
+          ref.current.resolvePromise(false);
+        }}
+        onConfirm={() => {
+          close();
+          ref.current.resolvePromise(true);
+        }}
+      />
+    );
+  }
+  return {
+    confirmApi,
+    contextHolder,
+  };
+}

package/src/hooks/useCreation/index.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-17 16:28:56
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-01-17 16:29:26
+ * @Description:
+ * @PageName:
+ */
+import type { DependencyList } from 'react';
+import { useRef } from 'react';
+import depsAreSame from '../../utils/depsAreSame';
+
+export default function useCreation<T>(factory: () => T, deps: DependencyList) {
+  const { current } = useRef({
+    deps,
+    obj: undefined as undefined | T,
+    initialized: false,
+  });
+  if (current.initialized === false || !depsAreSame(current.deps, deps)) {
+    current.deps = deps;
+    current.obj = factory();
+    current.initialized = true;
+  }
+  return current.obj as T;
+}

package/src/index.tsx

@@ -0,0 +1,38 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-09 13:54:14
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-01-17 16:58:16
+ * @Description:
+ * @PageName:
+ */
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '@unif/react-native-camera' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+// @ts-expect-error
+const isTurboModuleEnabled = global.__turboModuleProxy != null;
+
+const ReactNativeCameraModule = isTurboModuleEnabled
+  ? require('./NativeReactNativeCamera').default
+  : NativeModules.ReactNativeCamera;
+
+const ReactNativeCamera = ReactNativeCameraModule
+  ? ReactNativeCameraModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export default ReactNativeCamera;
+
+import useCamera from './hooks/useCamera.tsx';
+export { useCamera };

package/src/utils/common.ts

@@ -0,0 +1,85 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-11 14:53:09
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 15:04:23
+ * @Description:
+ * @PageName:
+ */
+import { Dimensions, Platform } from 'react-native';
+import type {
+  CameraModeCommonType,
+  CameraModeImageType,
+  CameraModeListItem,
+  CameraModeVidoType,
+  CameraProps,
+} from '../utils';
+
+import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';
+
+export const CONTENT_SPACING = 0;
+
+const SAFE_BOTTOM =
+  Platform.select({
+    ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
+  }) ?? 0;
+
+export const SAFE_AREA_PADDING = {
+  paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
+  paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
+  paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
+  paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
+};
+
+export const SCREEN_WIDTH = Dimensions.get('window').width;
+export const SCREEN_HEIGHT = Platform.select<number>({
+  android:
+    Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
+  ios: Dimensions.get('window').height,
+}) as number;
+
+// Capture Button
+export const CAPTURE_BUTTON_SIZE = 78;
+export const MAX_ZOOM_FACTOR = 10;
+
+// Control Button like Flash
+export const CONTROL_BUTTON_SIZE = 44;
+
+// 相机拍照模式
+export const CameraModeList: CameraModeListItem[] = [
+  { label: '连拍', value: 'continuous' },
+  { label: '单拍', value: 'single' },
+  { label: '视频', value: 'video' },
+];
+
+// 公用默认值
+export const CameraModeCommonData: CameraModeCommonType = {
+  type: 'back',
+  flashMode: 'off',
+  mode: 'single',
+};
+
+// 单拍
+export const SingleData: CameraModeCommonType & CameraModeImageType = {
+  ...CameraModeCommonData,
+  mode: 'single',
+};
+
+// 连拍拍
+export const ContinuousData: CameraModeCommonType & CameraModeImageType = {
+  ...CameraModeCommonData,
+  mode: 'continuous',
+};
+
+// 视频
+export const VideoData: CameraModeCommonType & CameraModeVidoType = {
+  ...CameraModeCommonData,
+  mode: 'video',
+  recTime: 60,
+  quantity: 1,
+};
+
+export const DefaultData: CameraProps = {
+  dataRetainedMode: 'clear',
+  cameraMode: [SingleData],
+};

package/src/utils/depsAreSame.ts

@@ -0,0 +1,12 @@
+import type { DependencyList } from 'react';
+
+export default function depsAreSame(
+  oldDeps: DependencyList,
+  deps: DependencyList
+): boolean {
+  if (oldDeps === deps) return true;
+  for (let i = 0; i < oldDeps.length; i++) {
+    if (!Object.is(oldDeps[i], deps[i])) return false;
+  }
+  return true;
+}

package/src/utils/index.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-11 14:53:09
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-17 16:54:04
+ * @Description:
+ * @PageName:
+ */
+export * from './common';
+export * from './render-item';
+export * from './px-to-dp';
+export * from './interface';