react-native - react native如何打开相机拍照？

Question

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

标签： react-native

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