Question

I want to create an image grid like this one but I have failed to get camera roll from the device. I have tried using @react-native-community/cameraroll but it doesn t seem to work Here is my code.

import React,{useState, useEffect} from  react ;
import {View} from  react-native ;
import * as Permissions from  expo-permissions ;
import CameraRoll from "@react-native-community/cameraroll";

const getImages = async (setImages) => {
   await Permissions.askAsync(Permissions.CAMERA_ROLL);
   const x=await CameraRoll.getPhotos({first:2})
   await setImages([...x.edges])
}

export default function App() {
  const [images,setImages]=useState([])
  useEffect(() => {
    console.log( loading photos )
    getImages(setImages)
    console.log( back )
    console.log(images)
  }, []);
  return (
    <View >
    </View>
  );
}

The code is intended to load images into the state when the component mounts. How can I fix this problem?

Answer 1

你们或许应该使用“接触媒体图书馆”,而不是照相Roll。

You can try this code :

import React, { useState, useEffect } from  react ;
import { View, Image } from  react-native ;
import * as Permissions from  expo-permissions ;
import * as MediaLibrary from  expo-media-library ;

const getImages = () => {
  return Permissions.askAsync(Permissions.CAMERA_ROLL)
    .then(() => {
      return MediaLibrary.getAssetsAsync({ first: 2 });
    })
    .then((result) => {
      return result.assets;
    });
};

export default function App() {
  const [images, setImages] = useState([]);

  useEffect(() => {
    console.log( loading photos );
    getImages().then(setImages);
    console.log( back );
    console.log(images);
  }, []);

  return (
    <View>
      { images.map((image) => (
        <Image key={image.id} source={{ uri: image.uri }} style={{width: 200, height: 200}}/>
      ))}
    </View>
  );
}

Answer 2

请审判:

import {CameraRoll} from "@react-native-community/cameraroll";

使用<><<>条码>>{CameraRoll},而不是<>>。传真:<>

友情链接