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

Question

我正在尝试为 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;

为了测试，我尝试了 return 中的一些代码并得到了下一个结果：

{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}

这很好用。有人知道如何解决吗？

Answer 1

据我了解，我的问题的原因是在 android 版本中。我通过在 AndroidManifest.xml

中添加“android:requestLegacyExternalStorage="true"" 解决了问题

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

Can't display images from device gallery

android

reactjs

react-native

react-native-android