react native如何打开相机拍照？

Posted 2023-03-15

【中文标题】react native如何打开相机拍照？

【英文标题】：How to open the camera and taking the picture in react native?

【发布时间】：2019-01-31 13:36:27

【问题描述】：

我想在用户单击按钮时从我的应用程序打开设备摄像头，当用户单击后退按钮时，它应该从设备摄像头对我的应用程序做出反应。我可以通过运行 react native 项目来打开相机并拍照。但我想做相机在什么应用程序中的工作方式。即点击按钮 -> 打开相机 -> 发送按钮。

我是 react native 的初学者。我尝试了很多方法，但我不知道如何完成。

谁能帮我做这个。

我的 App.js 代码是，

'use strict';
import React,  Component  from 'react';
import 
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
 from 'react-native';
import Camera from 'react-native-camera';

class BadInstagramCloneApp extends Component 
  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)>[CAPTURE]</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
  
);

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);

【参考方案1】：

您可以使用状态来显示/隐藏相机视图/组件。 请检查以下代码：

...
class BadInstagramCloneApp extends Component 
  constructor(props) 
    super(props);
    this.state = 
      isCameraVisiable: false
    
  

  showCameraView = () => 
    this.setState( isCameraVisible: true );
  
  render() 
    const  isCameraVisible  = this.state;
    return (
      <View style=styles.container>
        !isCameraVisible &&<Button title="Show me Camera" onPress=this.showCameraView />
        isCameraVisible &&
        <Camera
          ref=(cam) => 
            this.camera = cam;
          
          style=styles.preview
          aspect=Camera.constants.Aspect.fill>
          <Text style=styles.capture onPress=this.takePicture.bind(this)>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  

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

...

【讨论】：

谢谢 :) 。在 takePicture() 方法中，它给出了错误。所以我使用了 takePicture() const options = ; //options.location = ... this.camera.capture(metadata: options) .then((data) => console.log(data)) .catch(err => console.error(err));

但无法拍照

我的其他代码有问题。我解决了。它工作正常。谢谢你。 :)

【参考方案2】：

您可以为此使用https://github.com/ivpusic/react-native-image-crop-picker。该组件可帮助您拍照，如果需要，还可以拍照。正确遵循文档，这里是相机选择选项的代码

    ImagePicker.openCamera(
        cropping: true,
        width: 500,
        height: 500,
        cropperCircleOverlay: true,
        compressImageMaxWidth: 640,
        compressImageMaxHeight: 480,
        freeStyleCropEnabled: true,
    ).then(image => 
        this.setState(imageModalVisible: false)
)
.catch(e => 
        console.log(e), this.setState(imageModalVisible: false)
);