如何在React Native中使用vision-camera切换相机镜头

步骤1：获取同位置的所有镜头设备 #

先不要限定初始设备类型，获取所有可用相机设备后，筛选出同一位置（比如后置）的所有镜头：

import { useCameraDevices } from 'react-native-vision-camera';

// 获取所有可用相机设备
const devices = useCameraDevices();
// 筛选出后置的所有镜头设备（按需也可以选'front'）
const availableBackLenses = devices.filter(device => device.position === 'back');

步骤2：用状态管理当前选中的镜头 #

通过useState保存当前激活的镜头设备，初始默认选中广角镜头：

import { useState } from 'react';

// 初始选中广角镜头
const [currentLens, setCurrentLens] = useState(
  availableBackLenses.find(lens => lens.deviceType === 'wide-angle-camera')
);

步骤3：绑定当前镜头到Camera组件 #

渲染Camera组件时，直接传入当前选中的镜头设备：

import { Camera } from 'react-native-vision-camera';

<Camera
  device={currentLens}
  isActive={true}
  style={{ flex: 1 }}
/>

步骤4：实现切换按钮 #

遍历所有可用镜头，创建切换按钮，点击时更新当前选中的镜头：

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

{availableBackLenses.map(lens => (
  <TouchableOpacity
    key={lens.id}
    onPress={() => setCurrentLens(lens)}
    style={[
      styles.lensButton,
      currentLens?.id === lens.id && styles.activeButton
    ]}
  >
    <Text>{lens.deviceType.replace('-camera', '')}</Text>
  </TouchableOpacity>
))}

// 样式示例
const styles = StyleSheet.create({
  lensButton: {
    padding: 10,
    backgroundColor: '#fff',
    margin: 5,
    borderRadius: 8
  },
  activeButton: {
    backgroundColor: '#2196F3'
  }
});

注意事项 #

• 部分设备可能不支持所有镜头类型（比如无长焦镜头），代码会自动过滤不存在的设备，无需额外处理
• 切换镜头时，Camera组件会自动适配新设备，保持isActive为true即可，无需手动重启相机

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