如何使用vue native用世博会相机拍摄照片？

Question

我是新手vue native，我正在尝试在应用程序上创建一个页面，在那里我可以使用相机，并使用expo-camera指令捕获和显示照片。

这就是我所做的：

<template>
  <view class="view-container">

    <view class="container">
       <text>Camera screen</text>
       <camera class="container" :type="this.type" />
       <touchable-opacity 
       class="camera-touchable-opacity"
       :on-press="capturePic"
       >
     </view>

     <view class="home-btn">
        <button title="Go to home screen" @press="goToHomeScreen"></button>
     </view>
  </view>
</template>

<script>
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';

export default {
  props: {
    navigation: { type: Object }
  },
  data: function() {
    return {
       hasCameraPermission: false,
       type: Camera.Constants.Type.back,
    };
  },
  mounted: function() {
     Permissions.askAsync(Permissions.CAMERA)
       .then(status => {
           hasCameraPermission = status.status == "granted" ? true : false;
       }).catch((err)=>{
           console.log(err);
       });
  },
  components: { Camera },
  methods: {
    goToHomeScreen() {
      this.navigation.navigate("Home");
    },
    capturePic: async function() {
      if(!camera) return
      const photo = await camera.takePictureAsync();
    }
  }
}
</script>

收到此警告:未处理的promise rejection: ReferenceError: Can't find variable: camera

我不知道我需要什么，因为我在文档中没有找到任何关于捕获照片的内容。

Answer 1

您可以在方法中将camera引用为this.$refs.camera，因为您需要在代码中将元素引用为ref="camera“。

<camera class="container" :type="this.type" ref="camera"/>

捕获函数将为this.$refs.camera.takePictureAsync()

在代码中

capturePic: async function() {
  if(!camera) return
  const photo = await camera.takePictureAsync();
}