Question

当用户单击按钮时，我想从我的应用程序打开设备摄像头；当用户单击后退按钮时，它应该从设备摄像头对我的应用程序做出反应。我可以通过运行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);

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

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

2 个答案: