用Expo-Camera拍照

时间:2019-09-11 11:03:12

标签: javascript react-native expo

我是本机的新手,在使用Expo相机时遇到了一些麻烦。

我已经能够从应用程序缓存中拍照(异步)和预览,但是我的'retakeSnap'功能不起作用。

返回错误消息“ retakeSnap不是函数”,retakeSnap未定义。

尝试各种解决方案均无济于事。有人建议拍摄第一张照片后需要卸下相机,然后重新启动。如果是这样,我知道如何实现吗?

import React, { Component } from "react";
import CameraView from "./CameraView";
const image = require("../../assets/Metal.jpg");
import { Camera } from "expo-camera";
import { RNCamera } from "react-native-camera";
import * as Permissions from "expo-permissions";
import Expo, { AuthSession } from "expo";

class CameraContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cameraStart: true,
      imageLink: null,
      loading: false,
      hasCameraPermission: null,
      type: Camera.Constants.Type.back,
      preview: false,
      leftAction: "create",
      manual: false,
      cameraStatus: undefined,
      previewStatus: undefined
    };
  }
  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  }

  componentWillUnmount() {
    this._mounted = false;
  }

  takePicture = async value => {
    // if (value) {
    console.log("camera ref got", value);
    const options = {
      quality: 1,
      base64: true,
      fixOrientation: true,
      exif: true
    };
    await value.takePictureAsync(options).then(photo => {
      photo.exif.Orientation = 1;
      console.log(photo);
      console.log("camera data", photo.uri);
      if (photo.uri) {
        this.setState({
          cameraResult: true,
          imageLink: photo.uri,
          cameraStart: false,
          preview: true
        });
      }
    });

    // }
  };

  activeCamera = () => {
    this.setState({
      camera: true
    });
  };
  clickAgain = () => {
    console.log("clickAgain");
  };
  flipCamera = () => {
    const { type } = this.state;
    this.setState({
      type:
        type === Camera.Constants.Type.back
          ? Camera.Constants.Type.front
          : Camera.Constants.Type.back
    });
  };

  retakeSnap = () => {
    console.log("camera ref got", value);
    this.setState({
      cameraStart: true,
      preview: true
    });
  };
  goToAddItems = () => {
    console.log("goToAddItems");
  };
  leftPress = () => {
    const { navigation } = this.props;
    navigation.goBack();
  };
  validateSnap = () => {
    const { imageLink } = this.state;
    const logData = {
      snapTaken: imageLink
        ? imageLink
        : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS97Ns1F0STSWe1R3bBEw3_zDFDZo5LVyDyKBJzjuQNKyWpk4n-Qg"
    };
    console.log(logData);
    const { navigation } = this.props;
    navigation.navigate("ShootStart", { logDataDetails: logData });
  };
  render() {
    const {
      cameraResult,
      result,
      loading,
      retakeSnap,
      hasCameraPermission,
      type,
      imageLink,
      cameraStart,
      preview,
      leftAction,
      manual
    } = this.state;

      return (
        <CameraView
          cameraStart={cameraStart}
          cameraResult={cameraResult}
          imageLink={imageLink}
          leftPress={this.leftPress}
          takePicture={value => this.takePicture(value)}
          activeCamera={this.activeCamera}
          loading={loading}
          image={image}
          hasCameraPermission={hasCameraPermission}
          type={type}
          flipCamera={this.flipCamera}
          preview={preview}
          retakeSnap={retakeSnap}
          goToAddItems={this.goToAddItems}
          toggleCameraEdit={this.toggleCameraEdit}
          validateSnap={this.validateSnap}
          leftAction={leftAction}
          manual={manual}
        />
      );
    } 
  }

export default CameraContainer;

0 个答案:

没有答案