@unif/react-native-camera 1.0.0

package/src/camera/preview/PreViewContainer.tsx

@@ -0,0 +1,33 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-02 13:37:36
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-17 10:18:41
+ * @Description:
+ * @PageName:
+ */
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+
+const PreViewContainer: React.FC<{ visible: boolean }> = ({
+  visible,
+  children,
+}) => {
+  if (!visible) {
+    return null;
+  }
+  return <View style={styles.container}>{children}</View>;
+};
+
+export default PreViewContainer;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: '#fff',
+  },
+});

package/src/camera/preview/PreviewFooter.tsx

@@ -0,0 +1,32 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-16 09:21:56
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 10:27:40
+ * @Description:
+ * @PageName:
+ */
+import { StyleSheet, View } from 'react-native';
+import React, { type ReactNode } from 'react';
+
+export interface PreviewFooterProps {
+  actions: ReactNode[];
+}
+const PreviewFooter: React.FC<PreviewFooterProps> = ({ actions }) => {
+  return (
+    <View style={styles.footer}>
+      {actions.map((item) => {
+        return item;
+      })}
+    </View>
+  );
+};
+
+export default PreviewFooter;
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});

package/src/camera/preview/SinglePre.tsx

@@ -0,0 +1,66 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-16 09:54:00
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 14:58:16
+ * @Description:
+ * @PageName:
+ */
+import { Image, StyleSheet, View } from 'react-native';
+import React from 'react';
+import PreviewFooter from './PreviewFooter';
+import { Back, Save } from '../../components';
+import { SAFE_AREA_PADDING, type CustomPhotoFile } from '../../utils';
+
+export interface SingleProps extends CommonProps {
+  uri: string;
+}
+export interface CommonProps {
+  onBack?: () => void;
+  onDel?: (photo?: CustomPhotoFile) => Promise<boolean> | undefined;
+  onSave?: () => void;
+}
+const SinglePre: React.FC<SingleProps> = ({ uri, onBack, onSave }) => {
+  return (
+    <View style={styles.container}>
+      <Image
+        style={styles.container}
+        source={{ uri: `file://${uri}` }}
+        onLoadEnd={() => {
+          // 预留水印逻辑
+        }}
+      />
+      <View style={styles.footer}>
+        <PreviewFooter
+          actions={[
+            <Back
+              key="back"
+              style={styles.image}
+              text="返回"
+              onPress={onBack}
+            />,
+            <Save
+              key="save"
+              style={styles.image}
+              text="保存"
+              onPress={onSave}
+            />,
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SinglePre;
+
+export const styles = StyleSheet.create({
+  container: { flex: 1 },
+  footer: {
+    position: 'absolute',
+    bottom: SAFE_AREA_PADDING.paddingBottom + 12,
+    left: 0,
+    right: 0,
+  },
+  image: { width: 60, height: 60 },
+});

package/src/camera/preview/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-02 13:37:28
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-17 10:17:04
+ * @Description:
+ * @PageName:
+ */
+import PreView from './PreView';
+import SinglePre from './SinglePre';
+import PreViewContainer from './PreViewContainer';
+
+export { PreView, SinglePre, PreViewContainer };

package/src/camera/setup/SetUp.tsx

@@ -0,0 +1,273 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-02 11:52:31
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 15:04:51
+ * @Description:
+ * @PageName:
+ */
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useState } from 'react';
+import { CONTROL_BUTTON_SIZE, SAFE_AREA_PADDING } from '../../utils';
+import type { FlashMode } from '../../utils';
+
+const FlashOn = require('../../assets/tools/on.png');
+const FlashOff = require('../../assets/tools/off.png');
+const FlashAuto = require('../../assets/tools/auto.png');
+const volumeOff = require('../../assets/tools/volumeOff.png');
+const volumeOn = require('../../assets/tools/volumeOn.png');
+
+const four = require('../../assets/tools/4_3.png');
+const sixteen = require('../../assets/tools/16_9.png');
+
+const enlarge = require('../../assets/tools/enlarge.png');
+const narrow = require('../../assets/tools/narrow.png');
+const defaultEyeImage = require('../../assets/tools/defaultEye.png');
+const defaultFishEyeImage = require('../../assets/tools/fishEye.png');
+
+let volume = false;
+let screen = true;
+
+const SetUp: React.FC<{
+  isMultiCam: boolean;
+  onChange: (val: FlashMode) => void;
+  onAspectRationChange: (val: number) => void;
+  onVolumeChange: (val: boolean) => void;
+  onScreenChange: (val: 'cover' | 'contain' | undefined) => void;
+  onFishEyeOpen: (val: 'default' | 'fishEye') => void;
+}> = ({
+  isMultiCam,
+  onChange,
+  onAspectRationChange,
+  onScreenChange,
+  onVolumeChange,
+  onFishEyeOpen,
+}) => {
+  const [flashImage, setFlashImage] = useState(FlashOff);
+  const [aspectRatioImage, setAspectRatioImage] = useState(sixteen);
+  const [volumeImage, setVolumeImage] = useState(volumeOff);
+  const [flashOpen, setFlashOpen] = useState(false);
+  const [aspectRationOpen, setAspectRationOpen] = useState(false);
+  const [screenImage, setScreenImage] = useState(narrow);
+  const [fishEyeOpen, setFishEyeOpen] = useState(false);
+  const [fishEyeImage, setFishEyeImage] = useState(defaultEyeImage);
+  const [openHeader, setOpenHeader] = useState(true);
+
+  // 闪光灯切换
+  const falshChange = (type: FlashMode) => {
+    switch (type) {
+      case 'on':
+        setFlashImage(FlashOn);
+        break;
+      case 'auto':
+        setFlashImage(FlashAuto);
+        break;
+      default:
+        setFlashImage(FlashOff);
+        break;
+    }
+    onChange(type);
+    setFlashOpen(false);
+    setOpenHeader(true);
+  };
+
+  // 宽高比切换
+  const aspectRatioChange = (type: number) => {
+    switch (type) {
+      case 4:
+        setAspectRatioImage(four);
+        break;
+      case 16:
+        setAspectRatioImage(sixteen);
+        break;
+    }
+    onAspectRationChange(type);
+    setAspectRationOpen(false);
+    setOpenHeader(true);
+  };
+
+  // 宽高比切换
+  const fishEyeChange = (type: 'default' | 'fishEye') => {
+    onFishEyeOpen(type);
+    setFishEyeImage(defaultFishEyeImage);
+    setFishEyeOpen(false);
+    setOpenHeader(true);
+  };
+
+  return (
+    <>
+      {openHeader && (
+        <View style={{ ...styles.top, ...styles.header }}>
+          {/* <Text style={styles.text}></Text> */}
+        </View>
+      )}
+      <View style={{ ...styles.top, ...styles.tools }}>
+        <View style={styles.tool}>
+          <TouchableOpacity
+            style={styles.toolImg}
+            onPress={() => {
+              setOpenHeader(false);
+              setFlashOpen((val) => !val);
+            }}
+          >
+            <Image source={flashImage} style={styles.toolImg} />
+          </TouchableOpacity>
+          {flashOpen && (
+            <View style={styles.toolSetting}>
+              <Text onPress={() => falshChange('auto')} style={styles.toolText}>
+                自动
+              </Text>
+              <Text onPress={() => falshChange('on')} style={styles.toolText}>
+                打开
+              </Text>
+              <Text onPress={() => falshChange('off')} style={styles.toolText}>
+                关闭
+              </Text>
+            </View>
+          )}
+        </View>
+
+        <View style={styles.tool}>
+          <TouchableOpacity
+            style={styles.toolImg}
+            onPress={() => {
+              if (volume) {
+                setVolumeImage(volumeOff);
+              } else {
+                setVolumeImage(volumeOn);
+              }
+              volume = !volume;
+              onVolumeChange(volume);
+            }}
+          >
+            <Image source={volumeImage} style={styles.toolImg} />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.tool}>
+          <TouchableOpacity
+            style={styles.toolImg}
+            onPress={() => {
+              setOpenHeader(false);
+              setAspectRationOpen((val) => !val);
+            }}
+          >
+            <Image source={aspectRatioImage} style={styles.toolImg} />
+          </TouchableOpacity>
+          {aspectRationOpen && (
+            <View style={styles.toolSetting}>
+              <Text
+                onPress={() => aspectRatioChange(4)}
+                style={styles.toolText}
+              >
+                4:3
+              </Text>
+              <Text
+                onPress={() => aspectRatioChange(16)}
+                style={styles.toolText}
+              >
+                16:9
+              </Text>
+            </View>
+          )}
+        </View>
+
+        <View style={styles.tool}>
+          <TouchableOpacity
+            style={styles.toolImg}
+            onPress={() => {
+              if (screen) {
+                setScreenImage(enlarge);
+              } else {
+                setScreenImage(narrow);
+              }
+              onScreenChange(screen ? 'contain' : 'cover');
+              screen = !screen;
+            }}
+          >
+            <Image source={screenImage} style={styles.toolImg} />
+          </TouchableOpacity>
+        </View>
+
+        {isMultiCam && (
+          <View style={styles.tool}>
+            <TouchableOpacity
+              style={styles.toolImg}
+              onPress={() => {
+                setOpenHeader(false);
+                setFishEyeOpen((val) => !val);
+              }}
+            >
+              <Image source={fishEyeImage} style={styles.toolImg} />
+            </TouchableOpacity>
+            {fishEyeOpen && (
+              <View style={styles.toolSetting}>
+                <Text
+                  onPress={() => {
+                    fishEyeChange('default');
+                  }}
+                  style={styles.toolText}
+                >
+                  默认
+                </Text>
+                <Text
+                  onPress={() => {
+                    fishEyeChange('fishEye');
+                  }}
+                  style={styles.toolText}
+                >
+                  广角
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </>
+  );
+};
+
+export default SetUp;
+
+const styles = StyleSheet.create({
+  text: { color: '#fff' },
+  top: {
+    ...StyleSheet.absoluteFillObject,
+    marginHorizontal: 20,
+    top: SAFE_AREA_PADDING.paddingTop + 10,
+    bottom: undefined,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  tools: {
+    display: 'flex',
+    width: CONTROL_BUTTON_SIZE / 2,
+  },
+  tool: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: CONTROL_BUTTON_SIZE / 2,
+    height: CONTROL_BUTTON_SIZE / 2,
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  toolImg: {
+    width: '100%',
+    height: '100%',
+  },
+  toolSetting: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  toolText: {
+    marginLeft: 8,
+    fontWeight: '900',
+    color: '#fff',
+  },
+  headerLeft: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+});

package/src/camera/setup/index.tsx

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

package/src/components/Back.tsx

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

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,49 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-17 16:00:49
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 14:24:52
+ * @Description:
+ * @PageName:
+ */
+import React from 'react';
+import Carousel, {
+  type ICarouselInstance,
+} from 'react-native-reanimated-carousel';
+import { useSharedValue } from 'react-native-reanimated';
+import {
+  pxToDpHeight,
+  pxToDpWidth,
+  renderItem,
+  type CustomPhotoFile,
+} from '../../utils';
+const CustomCarousel: React.FC<{
+  data: CustomPhotoFile[];
+  onSnapToItem?: ((index: number) => void) | undefined;
+  ref?: React.Ref<ICarouselInstance>;
+}> = ({ data, onSnapToItem, ref }) => {
+  const scrollOffsetValue = useSharedValue<number>(0);
+
+  return (
+    <>
+      <Carousel
+        ref={ref}
+        width={pxToDpWidth(679)}
+        height={pxToDpHeight(857)}
+        snapEnabled={true}
+        pagingEnabled={true}
+        data={data}
+        defaultScrollOffsetValue={scrollOffsetValue}
+        style={{ width: pxToDpWidth(679) }}
+        onConfigurePanGesture={(g: { enabled: (arg0: boolean) => any }) => {
+          'worklet';
+          g.enabled(true);
+        }}
+        onSnapToItem={onSnapToItem}
+        renderItem={renderItem({ rounded: true, totalIndex: data.length })}
+      />
+    </>
+  );
+};
+
+export default CustomCarousel;

package/src/components/Carousel/SlideItem.tsx

@@ -0,0 +1,95 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-17 15:50:46
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-20 14:22:58
+ * @Description:
+ * @PageName:
+ */
+import React, { useMemo } from 'react';
+import {
+  type ImageSourcePropType,
+  type ImageStyle,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  type ViewProps,
+} from 'react-native';
+import type { AnimatedProps } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+import { pxToDpWidth } from '../../utils';
+
+interface Props extends AnimatedProps<ViewProps> {
+  style?: StyleProp<ImageStyle>;
+  index?: number;
+  totalIndex?: number;
+  rounded?: boolean;
+  source?: ImageSourcePropType;
+}
+
+export const SlideItem: React.FC<Props> = (props) => {
+  const {
+    style,
+    index = 0,
+    totalIndex = 0,
+    rounded = false,
+    ...animatedViewProps
+  } = props;
+  const source = useMemo(() => props.source, [props.source]);
+  return (
+    <Animated.View style={styles.flex} {...animatedViewProps}>
+      <Animated.Image
+        style={[style, styles.container, rounded && styles.borderRadius]}
+        source={source}
+        resizeMode="contain"
+      />
+      <View style={styles.overlay}>
+        <View style={styles.overlayTextContainer}>
+          <Text style={styles.overlayText}>
+            第{index + 1}/{totalIndex}笔
+          </Text>
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+    marginBottom: pxToDpWidth(20),
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    borderRadius: pxToDpWidth(10),
+  },
+  borderRadius: {
+    borderRadius: pxToDpWidth(10),
+  },
+  container: {
+    width: '100%',
+    height: '100%',
+  },
+  overlay: {
+    position: 'absolute',
+    bottom: -pxToDpWidth(20),
+    left: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+    letterSpacing: 2,
+  },
+  overlayTextContainer: {
+    backgroundColor: '#E96C00',
+    paddingHorizontal: 15,
+    paddingVertical: 5,
+    minWidth: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: pxToDpWidth(25),
+  },
+});

package/src/components/Carousel/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-17 16:01:04
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-17 16:07:53
+ * @Description:
+ * @PageName:
+ */
+import MyCarousel from './Carousel';
+
+import { SlideItem } from './SlideItem';
+
+export { MyCarousel, SlideItem };

package/src/components/Delete.tsx

@@ -0,0 +1,30 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-01-16 17:50:24
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-16 10:21:11
+ * @Description:
+ * @PageName:
+ */
+import { Image, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+
+import { type RotateProps } from './Rotate';
+import { styles } from './Back';
+const Delete: React.FC<RotateProps & { text?: string }> = ({
+  onPress,
+  style,
+  text,
+}) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <Image
+        source={require('../assets/preview/del.png')}
+        style={[styles.image, style]}
+      />
+      {text && <Text style={styles.text}>{text}</Text>}
+    </TouchableOpacity>
+  );
+};
+
+export default Delete;