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

【问题标题】：How to put an image on top of the view of the camera with react-native如何使用 react-native 将图像放在相机视图的顶部
【发布时间】：2016-06-07 15:33:59
【问题描述】：

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

是否有插件或可行的方法来做到这一点？目前，我只对放置图像并识别房间中的某个人感兴趣？（4个人在同一个房间，如果我指向一个，显示文字A，如果我指向另一个，显示文字B，依此类推）

【问题讨论】：

上次我检查了插件react-native-camera 能够显示实时图像，你可以（理论上）用你想要的任何东西覆盖它。虽然我无法让叠加层在 Android 上运行。见github.com/lwansbrough/react-native-camera
@mitza Sisic 你成功了吗？

标签： javascript reactjs react-native react-native-camera

【解决方案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 并添加新的视图设计并显示在我在帖子顶部示例的视图上。

【讨论】：

这正是我要找的！