Блог

Я пытаюсь использовать камеру Expo: (1) для съемки, (2) предварительного просмотра изображения, (3) возможность пересъемки изображения (4), наконец, сохраните его в локальном хранилище. (5) Просмотр галереи

Это здесь https://github.com/hayanisaid/expo-camera-tutorial/blob/master/App.tsx не смог мне помочь, потому что все мои экраны в формате js.

пожалуйста, найдите мое нынешнее состояние ниже:

  import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Button } from "react-native";
import { Camera } from "expo-camera";
import * as ImagePicker from "expo-image-picker";

const tcamera = ({ navigation }) => {
//navigator
const popHandler = () => {
  navigation.pop();
};
const pushHandler = () => {
  navigation.push("Capture center Coordinate");
};

//camera
const [cameraPermission, setCameraPermission] = useState(null);
const [galleryPermission, setGalleryPermission] = useState(null);

const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);

const permisionFunction = async () => {
  // here is how you can get the camera permission
  const cameraPermission = await Camera.requestPermissionsAsync();

  setCameraPermission(cameraPermission.status === "granted");

  const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();

  setGalleryPermission(imagePermission.status === "granted");

  if (
    imagePermission.status !== "granted" amp;amp;
    cameraPermission.status !== "granted"
  ) {
    alert("Permission for media access needed.");
  }
};

useEffect(() => {
  permisionFunction();
}, []);

const takePicture = async () => {
  if (camera) {
    const data = await camera.takePictureAsync(null);
    setImageUri(data.uri);
  }
};

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 1,
  });
  if (!result.cancelled) {
    setImageUri(result.uri);
  }
};

return (
  <View style={styles.container}>
    <Camera
      ref={(ref) => setCamera(ref)}
      style={styles.camera}
      type={type}
      type={type}
    />

    <View style={styles.buttonContainer}>
      <TouchableOpacity style={styles.btLogin} onPress={takePicture}>
        <Text style={styles.buttonText}> Save </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btLogin} onPress={takePicture}>
        <Text style={styles.buttonText}>snap</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btLogin} onPress={pickImage}>
        <Text style={styles.buttonText}>Gallery</Text>
      </TouchableOpacity>
    </View>
    <TouchableOpacity style={styles.btLogin1} onPress={pushHandler}>
      <Text style={styles.buttonText}>Proceed to Center Coordinate</Text>
    </TouchableOpacity>
    {imageUri amp;amp; <Image source={{ uri: imageUri }} style={styles.camera} />}
  </View>
);
};

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: "center",
  marginBottom: 0,
  backgroundColor: "#fff",
},
camera: {
  marginTop: 30,
  marginBottom: 10,
  aspectRatio: 0.855,
  flex: 0.8,
},
buttonContainer: {
  backgroundColor: "transparent",
  flexDirection: "row",
  alignItems: "center",
  marginHorizontal: 90,
},
button: {
  alignSelf: "flex-end",
  alignItems: "center",
  color: "#000",
},
buttonText: {
  fontSize: 15,
  color: "#fff",
},
text: {
  fontSize: 18,
  color: "#000",
},
btLogin: {
  borderWidth: 1.5,
  borderColor: "#3675B8",
  height: 37,
  backgroundColor: "#3675B8",
  padding: 7,
  borderRadius: 5,
  marginTop: 12,
  marginBottom: 12,
  marginLeft: 12,
  marginRight: 12,
  width: "46.5%",
  alignItems: "center",
},
btLogin: {
  borderWidth: 1.5,
  borderColor: "#3675B8",
  height: 37,
  backgroundColor: "#3675B8",
  padding: 7,
  borderRadius: 5,
  marginTop: 12,
  marginBottom: 12,
  marginLeft: 12,
  marginRight: 12,
  width: "46.5%",
  alignItems: "center",
},
btLogin1: {
  borderWidth: 1.5,
  borderColor: "#3675B8",
  height: 37,
  marginHorizontal: 20,
  backgroundColor: "#3675B8",
  padding: 7,
  borderRadius: 5,
  marginTop: 12,
  marginBottom: 12,
  width: "58%",
  alignItems: "center",
},
});

export default tcamera;

 

Заранее спасибо за вашу помощь….