android - 无法显示设备库中的图像

问题描述

我正在尝试为 android 开发一个小应用程序。其中一项功能是显示来自设备的照片。我得到了带有照片的数组，但我无法显示它们。我可以看到在获取照片后会出现一个滚动，就像屏幕上有东西一样，但我看不到它。

import React, {useEffect, useState} from 'react';
import {
    View,
    Text,
    Image,
    FlatList,
    PermissionsAndroid,
    Platform,
  } from 'react-native';
  import CameraRoll from '@react-native-community/cameraroll';

const Upload = () => {

    const [photos, setPhotos] = useState('');

    const getPhotos = () => {
        CameraRoll.getPhotos({
            first: 500,
            assetType: 'Photos',
            groupName: 'Camera'
        })
        .then((res) => {
            setPhotos(res.edges);
        })
        .catch((error) => {
            console.log(error);
        });
    };

    useEffect(
        () => {console.log('photos', photos)}, [photos]
    );

    const askPermission = async () => {
        if (Platform.OS === 'android') {
            
            const result = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
                {
                title: 'Permission Explanation',
                message: 'ReactNativeForYou would like to access your photos!',
                },
            );
          
            if (result !== 'granted') {
                console.log('Access to pictures was denied');
                return;
            } else {
                getPhotos();
            }

        } else {
          getPhotos();
        }
    };

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

    return(
        <View>
            <FlatList
                data={photos}
                numColumns={3}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item}) => (
                    <Image
                        style={{
                            width: 30,
                            height: 30,
                        }}
                        source={{uri: item.node.image.uri}}
                    />
                )}
            />
        </View>
    )
};

export default Upload;

为了测试，我尝试了一些代码作为回报并得到了下一个结果：

{photos.length !== 0 ? <Image style={{width: 100, height: 100}} source={{uri: 'file:///storage/emulated/0/DCIM/Camera/IMG_20210417_011652.jpg'}} /> : null}

这不显示任何内容。

{photos.length !== 0 ? <Image style={{width: 100, height: 100}} source={{uri: photos[1].node.image.uri}} /> : null}

这也没有显示任何内容。

{photos.length !== 0 ? <Image style={{width: 100, height: 100}} source={{uri: 'https://miro.medium.com/max/700/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'}} /> : null}

这很好用。任何人都知道如何解决它？

标签： androidreactjsreact-nativereact-native-android

android - 无法显示设备库中的图像

问题描述

解决方案

推荐阅读