如何捕获然后将这些图像保存在自己的本机应用程序中 [英] How to Captured And then save those images in react native app it self

问题描述

我是本机反应的新手.我创建了一个应用程序.在这个应用程序中，我也可以从相机和画廊捕获图像，但问题是现在.我希望捕获的图像存储在数组中并希望在特定屏幕上显示该图像.我想在那个屏幕上存储和显示 3-5 个图像

这是我的代码

import React, { useState, useEffect } from 'react';import { StyleSheet, Text, View, Button, Image } from 'react-native';从世博相机"导入{相机}；从@expo/vector-icons"导入{离子}；import * as ImagePicker from 'expo-image-picker';导出默认函数添加({导航}){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 [imageArray,setImageArray] = useState([])const permisionFunction = async() =>{//这里是你如何获得相机权限const cameraPermission = await Camera.requestPermissionsAsync();setCameraPermission(cameraPermission.status === 'granted');const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();console.log(imagePermission.status);setGalleryPermission(imagePermission.status === 'granted');如果 (imagePermission.status !== 'granted' &&cameraPermission.status !== 'granted'){alert('需要媒体访问权限.');}};useEffect(() => {权限函数();}, []);const takePicture = async() =>{如果(相机){const data = await camera.takePictureAsync(null);控制台日志(数据.uri)；setImageUri(data.uri);}};const pickImage = async() =>{setImageArray([imageArray..] + 结果)让结果 = 等待 ImagePicker.launchImageLibraryAsync({媒体类型:ImagePicker.MediaTypeOptions.Images，//允许真，//方面:[1, 1],质量:1，});控制台日志(结果)；如果(！结果.取消){setImageUri(result.uri);}};返回 (<视图样式={styles.container}><视图样式={styles.header}><Ionicons style={{paddingLeft:20}} name="arrow-back";大小={40}颜色=黑色"onPress={() =>navigation.navigate(OtherInfo")}/><Text style={{fontSize:20, paddingLeft: 70, paddingTop: 10}}>获取图片</Text></查看><视图样式={styles.cameraContainer}><相机ref={(ref) =>设置相机(参考)}style={styles.fixedRatio}类型={类型}比率={'1:1'}/></查看><按钮标题={'拍照'} onPress={takePicture}/><Button title={'Gallery'} onPress={pickImage}/>{imageUri &&<图片来源={{ uri: imageUri }} style={{ flex: 1 }}/>}</查看>);}const 样式 = StyleSheet.create({容器: {弹性:1，},相机容器:{弹性:1，flexDirection: '行',},固定比率:{弹性:1，纵横比:1，},按钮: {弹性:0.1，填充:10，alignSelf: 'flex-end',alignItems: '中心',},标题:{flexDirection: '行'}});

解决方案

正如我在我们之前的聊天中所建议的，这里是解决方案:

工作示例:

import React, { useState, useEffect } from 'react';import { StyleSheet, View, Button, Image, FlatList, Text } from 'react-native';从世博相机"导入{相机}；从@expo/vector-icons"导入{离子}；import * as ImagePicker from 'expo-image-picker';导出默认函数 Add() {const [cameraPermission, setCameraPermission] = useState(null);const [galleryPermission, setGalleryPermission] = useState(null);const [camera, setCamera] = useState(null);const [imageUri, setImageUri] = useState([]);const [type, setType] = useState(Camera.Constants.Type.back);const [imageArray, setImageArray] = useState([]);const permisionFunction = async() =>{//这里是你如何获得相机权限const cameraPermission = await Camera.requestPermissionsAsync();setCameraPermission(cameraPermission.status === 'granted');const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();console.log(imagePermission.status);setGalleryPermission(imagePermission.status === 'granted');如果 (imagePermission.status !== 'granted' &&cameraPermission.status !== 'granted'){alert('需要媒体访问权限.');}};useEffect(() => {权限函数();}, []);const takePicture = async() =>{如果(相机){const data = await camera.takePictureAsync(null);控制台日志(数据.uri)；setImageUri(data.uri);setImageArray([...imageArray, data.uri]);}};const pickImage = async() =>{让结果 = 等待 ImagePicker.launchImageLibraryAsync({媒体类型:ImagePicker.MediaTypeOptions.Images，质量:1，});控制台日志(结果.uri)；如果(！结果.取消){setImageArray([...imageArray, result.uri]);}};返回 (<视图样式={styles.container}><相机ref={(ref) =>设置相机(参考)}style={styles.fixedRatio}类型={类型}/>{imageArray.length >0 &&(<视图样式={{高度:110 }}><平面列表水平的数据={图像数组}renderItem={({ item }) =>(<图像来源={{ uri:项目}}样式={{ 宽度:100，高度:100，边框半径:10，边距:5 }}/>)}/></查看>)}<按钮标题={'拍照'} onPress={takePicture}/><Button title={'Gallery'} onPress={pickImage}/></查看>);}const 样式 = StyleSheet.create({容器: {弹性:1，},固定比率:{弹性:1，},});

I am new to react native. I have created An app. and In this app I am able to captured image from camera and gallery also but the problem is now . I want that captured Image To store in Array And want to show that image On specific screen. I want 3-5 images to store and show on that screen

here is my code

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import { Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';

export default function Add({ navigation }) {
  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 [imageArray,setImageArray] = useState([])

  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();
    console.log(imagePermission.status);

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

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

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

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

  const pickImage = async () => {
    setImageArray([imageArray..] + result)
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    //   allowsEditing: true,
    //   aspect: [1, 1],
      quality: 1,
    });

    console.log(result);
    if (!result.cancelled) {
      setImageUri(result.uri);
    }
  };

  return (
    <View style={styles.container}>

<View style={styles.header}>
        <Ionicons style={{paddingLeft:20}} name="arrow-back" size={40} 
        color="black"  onPress={() => navigation.navigate("OtherInfo")} />
        <Text style={{fontSize:20, paddingLeft: 70, paddingTop: 10}}>Get Image</Text>
      </View>

      <View style={styles.cameraContainer}>
        <Camera
          ref={(ref) => setCamera(ref)}
          style={styles.fixedRatio}
          type={type}
          ratio={'1:1'}
        />
      </View>

      <Button title={'Take Picture'} onPress={takePicture} />
      <Button title={'Gallery'} onPress={pickImage} />
      {imageUri && <Image source={{ uri: imageUri }} style={{ flex: 1 }} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cameraContainer: {
    flex: 1,
    flexDirection: 'row',
  },
  fixedRatio: {
    flex: 1,
    aspectRatio: 1,
  },
  button: {
    flex: 0.1,
    padding: 10,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  header:{
    flexDirection: 'row'
  }
});

解决方案

As I suggested in our previous chat, here is the solution:

Working Example: Expo Snack

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Button, Image, FlatList, Text } from 'react-native';
import { Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';

export default function Add() {
  const [cameraPermission, setCameraPermission] = useState(null);
  const [galleryPermission, setGalleryPermission] = useState(null);

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

  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();
    console.log(imagePermission.status);

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

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

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

  const takePicture = async () => {
    if (camera) {
      const data = await camera.takePictureAsync(null);
      console.log(data.uri);
      setImageUri(data.uri);
      setImageArray([...imageArray, data.uri]);
    }
  };

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
    });

    console.log(result.uri);
    if (!result.cancelled) {
      setImageArray([...imageArray, result.uri]);
    }
  };

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

      {imageArray.length > 0 && (
        <View style={{ height: 110 }}>
          <FlatList
            horizontal
            data={imageArray}
            renderItem={({ item }) => (
              <Image
                source={{ uri: item }}
                style={{ width: 100, height: 100, borderRadius: 10, margin: 5 }}
              />
            )}
          />
        </View>
      )}
      <Button title={'Take Picture'} onPress={takePicture} />
      <Button title={'Gallery'} onPress={pickImage} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  fixedRatio: {
    flex: 1,
  },
});

这篇关于如何捕获然后将这些图像保存在自己的本机应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！