在React Native中实现带相机拍摄的可拖拽缩放内部视图

依赖准备 #

首先需要安装手势处理、动画库以及相机组件库：

• 手势与动画：react-native-gesture-handler + react-native-reanimated
• 相机组件：原生项目用react-native-camera，Expo项目用expo-camera

执行安装命令：

# 原生项目
npm install react-native-gesture-handler react-native-reanimated react-native-camera
# Expo项目
npx expo install expo-camera react-native-gesture-handler react-native-reanimated

核心代码实现 #

以下是原生项目的示例代码，Expo项目只需将相机组件替换为expo-camera的Camera即可：

import React, { useRef, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Camera } from 'react-native-camera';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

const CameraWithDraggableFrame = () => {
  // 控制取景框位置与缩放的共享值
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const scale = useSharedValue(1);
  const baseScale = useSharedValue(1);

  // 拖拽手势逻辑
  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      // 可选：添加边界限制，防止取景框完全移出屏幕
      // 可根据屏幕尺寸和取景框尺寸计算允许的移动范围
    });

  // 缩放手势逻辑
  const pinchGesture = Gesture.Pinch()
    .onUpdate((event) => {
      scale.value = baseScale.value * event.scale;
    })
    .onEnd(() => {
      // 限制缩放范围，避免过度缩放
      scale.value = Math.max(0.8, Math.min(scale.value, 2));
      baseScale.value = scale.value;
    });

  // 组合手势，支持同时拖拽和缩放
  const combinedGesture = Gesture.Simultaneous(panGesture, pinchGesture);

  // 绑定动画样式
  const animatedFrameStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value }
    ]
  }));

  return (
    <View style={styles.container}>
      <Camera
        style={styles.camera}
        type={Camera.Constants.Type.back}
      />
      {/* 可拖拽缩放的取景框 */}
      <GestureDetector gesture={combinedGesture}>
        <Animated.View style={[styles.frameWrapper, animatedFrameStyle]}>
          <View style={styles.frameBorder} />
        </Animated.View>
      </GestureDetector>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  camera: {
    flex: 1,
  },
  frameWrapper: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    width: 220,
    height: 220,
    transform: [{ translateX: -110 }, { translateY: -110 }],
  },
  frameBorder: {
    flex: 1,
    borderWidth: 2,
    borderColor: '#ffffff',
    borderRadius: 12,
    backgroundColor: 'rgba(0,0,0,0.25)',
  },
});

export default CameraWithDraggableFrame;

关键配置与优化 #

1. 手势冲突处理：通过Gesture.Simultaneous实现拖拽与缩放手势的同时触发，避免互斥
2. 范围限制：可在手势结束时添加逻辑，限制取景框的移动边界和缩放比例，提升体验
3. 权限配置：
   • iOS：在Info.plist中添加NSCameraUsageDescription权限描述
   • 安卓：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />
4. 扩展功能：可添加双击重置取景框位置/缩放、自定义取景框样式、截取框内画面等功能

内容的提问来源于stack exchange，提问作者Yash