React Native CameraRoll.getPhotos API, похоже, не возвращает - PullRequest
Новая
       4

React Native CameraRoll.getPhotos API, похоже, не возвращает

0 голосов
/ 05 мая 2020

images grid

Я хочу создать сетку изображений, подобную этой, но мне не удалось получить снимок камеры с устройства. Я пробовал использовать @ response-native-community / cameraroll , но, похоже, это не работает Вот мой код. 

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>
  );
}

Код предназначен для загрузки изображений в состояние когда компонент монтируется. Как исправить эту проблему?

1 Ответ

1 голос
/ 05 мая 2020

Вероятно, вам следует использовать Expo MediaLibrary вместо CameraRoll.

Вы можете попробовать этот код: 

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>
  );
}
...