1

我是 react-native Expo 的初学者，我已经启动了一个 Expo Camera Application。但是当我捕获图像时我遇到了很多问题，它给了我对象，但我想将它存储到我手机的文件管理器中。但我不知道怎么可能请建议我一些我应该遵循的内容或方法。我已经尝试过MediaLibrary.saveToLibraryAsync(localUri)来解决，但它不能解决我的问题。

import React, { useState, useEffect } from "react";
import { Text, View, TouchableOpacity, StyleSheet, Button } from "react-native";
import { Camera } from "expo-camera";
import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permission";
import * as MediaLibrary from "expo-media-library";
export default function Cam() {
  const [hasPermission, setHasPermission] = useState(null);

  const [type, setType] = useState(Camera.Constants.Type.back);
  const [zoom, setzoom] = useState(0);
  const [flash, setflash] = useState(Camera.Constants.FlashMode.on);
  useEffect(() => {
    (async () => {
      const { Permissions } = Expo;
      const { stat } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (stat === "granted") {
        setrollPermission(stat === "granted");
      } else {
        /// Handle permissions denied;
        console.log("Uh oh! The user has not granted us permission.");
      }
      const { status } = await Camera.requestPermissionsAsync();
      // const result2 = await Permissions.getAsync(Permissions.CAMERA_ROLL);
      setHasPermission(status === "granted");
    })();
  }, []);
  // functions for functionality of camera
  function FlipCam() {
    if (type === Camera.Constants.Type.front) {
      setType(Camera.Constants.Type.back);
    } else {
      setType(Camera.Constants.Type.front);
    }
  }
  function ZoomIn() {
    if (zoom < 1) {
      setzoom(zoom + 0.1);
    }
  }
  function ZoomOut() {
    if (zoom != -1) {
      setzoom(zoom - 0.1);
    }
  }
  function flashCam() {
    if (flash === Camera.Constants.FlashMode.off) {
      setflash(Camera.Constants.FlashMode.torch);
    } else {
      setflash(Camera.Constants.FlashMode.off);
    }
  }
  let photo;
  const snap = async () => {
    if (this.camera) {
      photo = await this.camera.takePictureAsync();
      console.log(photo);
      SaveImage();
    }
  };
  //assessing to file library
  PickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    });
  };
  // Saving image

  async function SaveImage() {
    await MediaLibrary.saveToLibraryAsync(photo.uri);
  }

  // Permissions
  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        type={type}
        flashMode={flash}
        zoom={zoom}
        ref={(ref) => {
          this.camera = ref;
        }}
      >
        <View
          style={{
            flex: 1,
            backgroundColor: "transparent",
            flexDirection: "row",
          }}
        ></View>
        <View>
          <Button title="library" onPress={PickImage} />
        </View>
        {/* icons container */}

        <View style={styles.iconContainer}>
          <Ionicons name="ios-refresh" size={50} onPress={FlipCam} />
          <Ionicons name="ios-camera" size={70} onPress={snap} />
          <MaterialCommunityIcons name="flash" size={40} onPress={flashCam} />
          <Feather name="zoom-in" size={40} onPress={ZoomIn} />
          <Feather name="zoom-out" size={40} onPress={ZoomOut} />
        </View>
      </Camera>
    </View>
  );
}
const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: "row",
    padding: 10,
    alignContent: "center",
    justifyContent: "space-evenly",
  },
  iconContainer: {
    paddingBottom: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-evenly",
  },

  flipBtn: {
    alignContent: "center",
    justifyContent: "flex-start",

    alignSelf: "center",
  },
});

4

0 回答 0