如何使用 react-native 将图像放在相机视图的顶部

Question

我有兴趣使用 React-Native 在相机视图顶部放置一个视图，类似于以下内容：

是否有插件或易于使用的方法来执行此操作？目前，我只对放置图像并识别房间中的某个人感兴趣？（4个人在同一个房间，如果我指向一个，显示文字A，如果我指向另一个，显示文字B，以此类推）

Answer 1

当然，最好的相机库是react-native-camera，你可以轻松使用它并设置它的样式来包裹所有视口，请参阅以下代码：

import React, { useRef } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { RNCamera } from 'react-native-camera';

const CameraView = () => {
  const cameraRef = useRef(null);
  const takePicture = async () => {
    if (cameraRef) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraRef.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <SafeAreaView style={styles.safeWrapper}>
      <View style={styles.container}>
        <RNCamera
          ref={cameraRef}
          style={styles.camera}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
        />
        <View style={styles.snapWrapper}>
          <TouchableOpacity onPress={takePicture} style={styles.capture}>
            <Text style={styles.snapText}>SNAP</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeWrapper: {
    flex: 1,
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
    position: 'relative',
  },
  camera: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
  snapWrapper: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    position: 'absolute',
    top: 50,
    left: 16,
    right: 16,
  },
  snapText: {
    fontSize: 14,
    color: 'red',
  },
});

export default CameraView;

上面代码查看：

人脸检测

对于人脸检测，onFacesDetected您可以像下面这样使用它：

<RNCamera
  ref={cameraRef}
  style={styles.camera}
  type={RNCamera.Constants.Type.back}
  flashMode={RNCamera.Constants.FlashMode.on}
  onFacesDetected={({ faces }) => { // <===== this function
    console.log(faces); 
  }}
/>

类型faces是：

interface Size<T = number> {
  width: T;
  height: T;
}

interface Point<T = number> {
  x: T;
  y: T;
}

interface Face {
  faceID?: number;
  bounds: {
    size: Size;
    origin: Point;
  };
  smilingProbability?: number;
  leftEarPosition?: Point;
  rightEarPosition?: Point;
  leftEyePosition?: Point;
  leftEyeOpenProbability?: number;
  rightEyePosition?: Point;
  rightEyeOpenProbability?: number;
  leftCheekPosition?: Point;
  rightCheekPosition?: Point;
  leftMouthPosition?: Point;
  mouthPosition?: Point;
  rightMouthPosition?: Point;
  bottomMouthPosition?: Point;
  noseBasePosition?: Point;
  yawAngle?: number;
  rollAngle?: number;
}

面对检测并获得响应后，faces您可以使用state并添加新的视图设计并显示在我在帖子顶部示例的视图上。