Question

我正在尝试为本机化的Expo应用程序拍照，但我无法弄清楚，关于堆栈溢出的以下回答无济于事：How to snap pictures using expo react native camera?。

我的代码大部分来自他们网站（https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync）上的expo演示，除了我添加了一个我想用来拍照的图片按钮。有人可以帮我吗？

我已经尝试使用上述堆栈溢出帮助，但它没有用。

import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';

export default class CameraExample extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
  };

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera style={{ flex: 1 }} type={this.state.type}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.setState({
                    type:
                      this.state.type === Camera.Constants.Type.back
                        ? Camera.Constants.Type.front
                        : Camera.Constants.Type.back,
                  });
                }}>
                <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
              </TouchableOpacity>
              <TouchableOpacity> 
              <Image source={require("./images/camera.jpeg")}
              style={{width: 100,
              height: 100}} /> /* this is my button for taking the picture*/
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}

我现在只想拍摄一张图片并显示到控制台上。

Answer 1

在代码的这一部分中，您需要设置一个onPress操作来“捕捉”图片。我的建议很简单，就是添加

<TouchableOpacity onPress={() => takePicture()}> <Image source={require("./images/camera.jpeg")} style={{width: 100, height: 100}} /> </TouchableOpacity>

并添加异步功能以接收实际图片：

 const takePicture = async () => {
    if (this.camera) {
        const options = {quality: 1, base64: true};
        const data = await this.camera.takePictureAsync(options);
        console.log(data);
    }
};

转到您的终端，您将在其中拥有Image BASE64 Image的日志。

我希望这对您有所帮助：）

用世博相机拍照

1 个答案: