如何打开相机并在反应本机中拍照

Question

当用户单击按钮时，我想从我的应用程序打开设备相机，当用户单击后退按钮时，它应该从设备相机对我的应用程序做出反应。我能够通过运行反应本机项目打开相机并拍照。但我想做相机在应用程序中的工作方式。那就是点击按钮->打开相机->发送按钮。

我是反应原生的初学者。我尝试了很多方法，但我不明白如何做到这一点。

任何人都可以帮助我做到这一点。

我的应用.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);

Answer 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));
  }
}
...

Answer 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})
});

Answer 3

更正了最佳答案，因为 RNCamera 的相机被弃用，加上缺少右括号"）"就在 .catch 之前，就像状态声明的拼写错误一样：

但基本上有 2 条路线，无论您是使用 expo 还是 react native。如果你使用的是传统的 React Native，你必须有 Pods/Ruby/Cocoapods 或手动链接等等，但如果你设置了一个博览会并且不要听这个，那就使用 expo-camera

。

这是一个带有 Pods/Ruby/CocoaPods 的 React-Native 解决方案，而如果你没有这样设置，使用曝光相机可能会更快更好。

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity
} from 'react-native';
import { RNCamera } from 'react-native-camera';
export default class Camera2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isCameraVisible: false
        }
      }
      showCameraView = () => {
        this.setState({ isCameraVisible: true });
      }

      takePicture = async () => {
        try {
          const data = await this.camera.takePictureAsync();
          console.log('Path to image: ' + data.uri);
        } catch (err) {
          // console.log('err: ', err);
        }
      };
  render() {
    const { isCameraVisible } = this.state;
    return (
      <View style={styles.container}>
        {!isCameraVisible &&<Button title="Show me Camera" onPress={this.showCameraView} />}
        {isCameraVisible &&
           <RNCamera
           ref={cam => {
             this.camera = cam;
           }}
           style={styles.preview}
         >
           <View style={styles.captureContainer}>
             <TouchableOpacity style={styles.capture} onPress={this.takePicture}>
             <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
               <Text>Take Photo</Text>
             </TouchableOpacity>
           </View>
         </RNCamera>}
      </View>
    );
  }
}
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
    }
  });