1

我正在尝试学习 vue-native 并创建一个练习应用程序来使用相机和捕捉图像。在文档中，他们使用一些ref将相机分配给它，但我不知道在 vue-native 中传递 ref 的确切方法。我做了很少的功课，在 git 上发现了这个问题，但它也没有帮助。

参考： https ://github.com/GeekyAnts/vue-native-core/issues/88

文档（vue-native）： https ://vue-native.io/docs/device-apis.html#Camera

文档（世博相机）： https ://docs.expo.io/versions/latest/sdk/camera/#takepictureasync

代码片段是：

<template>
  <view class="container">
    <camera 
      class="camera" 
      :type=type
      ref="camera"  
    >
      <view class="camera-view-1">
          <view class="camera-view-2">
            <view class="camera-view-3">
              <touchable-opacity 
                class="camera-touchable-opacity"
                :on-press="_takePicture"
              >
                <text style="color: #FF0000">Capture</text>
              </touchable-opacity>
            </view>
          </view>
        </view>    
    </camera>
    <view>
      <touchable-opacity
        :on-press="_changeCamera">
        <text class="change-cam"> Change Camera </text>
      </touchable-opacity>
      <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 {
  data: function() {
    return {
      hasCameraPermission: false,
      type: Camera.Constants.Type.back,
      img: '',
    };
  },
  props: {
    navigation: { type: Object }
  },
  methods: {
    goToHomeScreen() {
      this.navigation.navigate("Home");
    },
    _changeCamera: function() {
        this.type = (this.type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back);
    },
    _takePicture: async function() {
      if(!camera) return;
      const photo = await camera.takePictureAsync();
    }
  },
  mounted: function() {
    Permissions.askAsync(Permissions.CAMERA)
      .then(status => {
        hasCameraPermission = status.status == "granted" ? true : false;
      }).catch((err)=>{
          console.log(err);
      });
  },
  components: { Camera },
};
</script>

<style>
.container, .camera {
  flex: 1;
}

.change-cam {
  color: #FF0000;
  text-align: center;
}
</style>

当我单击捕获按钮时，我收到一个camera未定义的错误。我认为我没有ref正确使用。有人可以建议使用它的正确方法vue-native吗？谢谢

4

2 回答 2

0 
#In which code open camera and take picture# 
#Note: npm/yarn install expo-permissions#
#npm/yarn install expo-camera#    
    <template>
      <view class="container">
        <camera
          class="container"
          :type="this.type"
          ref="this.camera"
          v-if="!!myPreviewImg.uri === false"
        />
        <touchable-opacity
          class="camera-touchable-opacity"
          :on-press="capturePic"
          :disabled="!readyCapture"
          v-if="!!myPreviewImg.uri === false"
        >
          <text :style="{ color: 'white', fontSize: 20, backgroundColor: 'blue' }"
            >Take Picture</text
          >
        </touchable-opacity>
    
        <View v-if="!!myPreviewImg.uri === true">
          <Image style="width: 100%; height: 95%" :source="myPreviewImg"> </Image>
          <touchable-opacity class="camera-touchable-opacity" :on-press="close">
            <text :style="{ color: 'white', fontSize: 20, backgroundColor: 'blue' }"
              >Close</text
            >
          </touchable-opacity>
        </View>
      </view>
    </template>
    <script>
    import * as Permissions from "expo-permissions";
    import { Camera } from "expo-camera";
    
    export default {
      data: function () {
        return {
          hasCameraPermission: false,
          type: Camera.Constants.Type.back,
          isPreview: false,
          ref: null,
          cameraRef: "",
          readyCapture: false,
          myPreviewImg: {
            uri: false,
          },
        };
      },
      mounted: function () {
        this.cameraPic();
      },
      methods: {
        capturePic: async function () {
          let data = await this.$refs["this.camera"].takePictureAsync();
          console.log("photo", data);
          this.myPreviewImg = {
            uri: data.uri,
          };
          this.readyCapture = true;
        },
        cameraPic: async function () {
          let { status } = await Camera.requestPermissionsAsync();
          if (status === "granted") {
            console.log("Permission to access location was denied");
            this.hasCameraPermission = status == "granted" ? true : false;
            console.log(this.hasCameraPermission);
            this.readyCapture = true;
            return;
          }
        },
        close: function () {
          this.myPreviewImg = {
            uri: false,
          };
        },
      },
      components: { Camera },
    };
    </script>
    <style>
    .container {
      flex: 1;
    }
    .text-color-primary {
      color: blue;
    }
    </style>
于 2021-09-22T06:27:44.840 回答
0

您可以像this.$refs.camera在您的方法中那样引用您的相机，因为您在代码中将元素上的引用定义为 ref="camera" ..

捕获功能将是this.$refs.camera.takePictureAsync()

在您的代码中

_takePicture: async function() {
      if(!camera) return;
      const photo = await this.$refs.camera.takePictureAsync();
    }
于 2021-10-06T21:02:31.757 回答