时间戳

首页 > 解决方案 > React 原生访问前置摄像头

react-native - React 原生访问前置摄像头

问题描述

我正在使用“react-native camera”库来访问相机。所以这是我的代码。

 import React, { Component } from "react";
 import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
   View
 } from "react-native";
import Camera from "react-native-camera";
import { RNCamera, FaceDetector } from "react-native-camera";

 export default class App extends Component<Props> {
 render() {
   return (
  <View style={styles.container}>
    <Camera
      ref={cam => {
        this.camera = cam;
      }}
      style={styles.preview}
      aspect={Camera.constants.Aspect.fill}
    >
      <Text style={styles.capture} onPress= 
   {this.takePicture.bind(this)}>
        take photo
      </Text>
    </Camera>
  </View>
   );
 }

 takePicture() {
   const options = {};
   //options.location = ...
   this.camera
  .capture({ metadata: options })
  .then(data => console.log(data))
  .catch(err => console.error(err));
  }
  }

const styles = StyleSheet.create({
 container: {
 flex: 1,
 flexDirection: "row"
},
preview: {
  flex: 1,
  justifyContent: "flex-end",
  alignItems: "center"
},
 capture: {
  flex: 0,
  backgroundColor: "#fff",
  borderRadius: 5,
  color: "#000",
  padding: 10,
  margin: 40
  }
});

在这里，我可以访问后置摄像头，每当我点击拍照时，它都会捕获图像并立即显示。但我需要在这里做两处改变。

  1. 使用此代码，可以访问后置摄像头，但我想访问前置摄像头。

  2. 此外，我捕获的图像不应立即显示。我想要一个按钮，每当我单击该按钮时，它都会导航到不同的页面并在那里显示所有图像。

有可能反应原生吗？如果是，那么请建议我在此代码中需要进行的更改

标签： react-native

解决方案

要具体回答您的第二个问题，您有两种选择。

A）拍摄照片后，将其存储为base64 uri您的状态或redux，然后在需要时将base64 uri显示为图像。

B) 利用包react-native-fs访问文件系统，将拍摄的照片作为缓存存储在 iOS 中，并在需要时检索它。

根据处理它的个人经验，我会推荐选项A

推荐阅读