在React Native应用程序中拍照并保存到iPhone存储中

Taking pictures in React Native app and saving to iPhone storage

提问人:Alina Luzanova 提问时间:11/9/2023 更新时间:11/9/2023 访问量:23

问:

我正在React Native上开发一个移动应用程序,其中的一个屏幕负责拍照:

import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { Camera } from 'expo-camera';
import { TouchableOpacity } from 'react-native-gesture-handler';

const CameraScreen = ({ navigation }) => {
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef(null);
  const [photo, setPhoto] = useState(null);
  const [cameraReset, setCameraReset] = useState(false);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  useLayoutEffect(() => {
    navigation.setOptions({
      title: ' ',
    });
  }, []);

  const resetCamera = () => {
    setPhoto(null);
    setCameraReset(true);
  };

  const takePhoto = async () => {
    if (cameraRef.current) {
      const { uri } = await cameraRef.current.takePictureAsync();
      setPhoto(uri);
    }
  };

  return (
    <View style={styles.container}>
      {hasPermission ? (
        <View style={styles.cameraContainer}>
          <Camera style={styles.camera} ref={cameraRef}>
            <Text style={styles.comment}>Поместите формулу в прямоугольник</Text>
            <View style={styles.formula}></View>
          </Camera>
          <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={takePhoto} style={styles.snapContainerBig}>
              <TouchableOpacity onPress={takePhoto} style={styles.snapContainer}></TouchableOpacity>
            </TouchableOpacity>
          </View>
        </View>
      ) : (
        <Text>No access to camera</Text>
      )}
      {photo && (
        <View style={styles.photoPreviewContainer}>
          <Image source={{ uri: photo }} style={styles.photoPreview} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
    ...
 });

export default CameraScreen;

我希望将这些图片保存到手机的图像中,然后广播到另一个屏幕。或者如果可能的话,立即将图像广播到另一个屏幕而不保存。我不想使用数据库(例如firebase),因为我目前处于UI / UX阶段,我正在通过expo进行测试,并且它与firebase不兼容。我需要某种本地存储。

在不使用数据库的情况下,我可以用什么来解决我的问题?

JavaScript React-Native Image Expo 移动应用

评论

0赞 Ravi 11/9/2023
使用本地存储,将很难远程共享它,除非您使用某些远程 API 或第三方广播 API

答: 暂无答案