我想使用Expo的CameraAPI启动相机

Question

在ProfileScreen上拍照配置文件的图片当我按下UI时，CameraScreen相机无法启动，并且遇到了麻烦。 。 我要显示用于在ConnectActionSheet库中拍照和从相册中选择的UI，然后按“ Take Photo” UI运行另一个文件中定义的CameraScreen。

ProfileScreen

import React from "react";
import {
  ScrollView,
  View,
  Text,
  Button,
  Alert,
  StyleSheet,
  Image,
  TextInput,
  Keyboard,
  KeyboardAvoidingView,
  Platform
} from "react-native";
import styled from "styled-components";
// Start camera
import CameraScreen from "../components/Camera";
// Start camera-roll
import * as ImagePicker from "expo-image-picker";
// camera-roll, camera selection UI library
import { connectActionSheet } from "@expo/react-native-action-sheet";


class Profile extends React.Component {
　// I want to call the camera component here. .
  _onCamera = () => {
    CameraScreen;
  };

  // Take a photo, define selection items from the album
  _onOpenActionSheet = () => {
    const options = ["Take photo", "Select from album", "Cancel"];
    const cancelButtonIndex = 2;

    this.props.showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex
      },
      buttonIndex => {
        if (buttonIndex === 0) {
          this._onCamera();
        } else if (buttonIndex === 1) {
          // Selection from album is still undefined
          this._onCamerarollAction();
        } else {
          console.log("Cancel was pressed!");
        }
      }
    );
  };

render(){
  return(
          <ImageArea onPress={this._onOpenActionSheet}>
            <Image
              style={styles.image}
              source={require("../assets/person1.png")}
            />
          </ImageArea>

  );
}

}
// Defined so that aciton-sheet can be used in Profile component
const ProfileScreen = connectActionSheet(Profile);

export default ProfileScreen;

//CSS is omitted.

CameraScreen

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


export default class CameraScreen extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back
  };
  // Ask user for permission to use camera
  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>
            </View>
          </Camera>
        </View>
      );
    }
  }
}