设备的本地图像不会在 React Native 的 Image 组件上呈现。（安卓）答案

【问题标题】：Device's local images doesn't render on Image component of React Native. (Android)设备的本地图像不会在 React Native 的 Image 组件上呈现。（安卓）
【发布时间】：2021-07-23 00:40:13
【问题描述】：

我正在尝试制作一种画廊，但是当我尝试访问本地文件时发现了一个问题，我使用了 react-native/@comunity 的 CameraRoll 库来获取图像的信息。

CameraRoll 可以正常工作并返回正确的图像 uri，但即使尝试直接通过源中的路径访问也不起作用，但是如果我使用外部 uri，组件会显示图像。我试过直接使用 uri、变量或状态（在 Flatlist 注释中），它们都不起作用。

应用程序可以访问存储以进行写入、读取和修改。 getPhotos 方法运行良好，并返回了我在模拟器中拥有的 2 张图像。

有没有人遇到过类似的问题？

反应原生：0.64.2 Android 10 (Android Studio)

  const [images, setImages] = useState([]);

  async function getPhotos() {
    if (Platform.OS === 'android' && (await hasAndroidPermission())) {
      CameraRoll.getPhotos({
        first: 4,
        assetType: 'All',
      }).then(r => {
        setImages(r.edges);
      });
    }
  }

 function handleGetPhotos() {
    getPhotos();
  }

  return (
    <View>
      <ButtonGet title="Get Photos" onPress={() => handleGetPhotos()}>
        <Text>Get Photos</Text>
      </ButtonGet>

      <Image
        style={{width: 50, height: 50}}
        // source={{
        //   uri: 'https://reactjs.org/logo-og.png',
        // }} //That works
        source={{
          uri: 'file:///storage/emulated/0/DCIM/Camera/IMG_20210718_112257.jpg',
        }}
        resizeMode={'contain'} //i tried whitout and doesn't change anything
      />

      <FlatList
        data={images}
        keyExtractor={item => item.node.timestamp}
        renderItem={({item, index}) => (
          <View style={{backgroundColor: 'blue', marginBottom: 15}}>
            <Text>{item.node.group_name}</Text>
            {/* <Image source={{uri: item.node.image.uri}} /> */}
          </View>
        )}
      />
    </View>
  );

r.edges 的对象示例（空值是因为 CameraRoll 中的某些选项，我当时省略了，但也可以）：

node: {
  group_name: 'Download',
  image:{
    fileSize: null, 
    filename: null, 
    height: null, 
    playableDuration: null, 
    uri: 'file:///storage/emulated/0/DCIM/Camera/IMG_20210718_112257.jpg', 
    width: null
  }, 
  location: null,
  modified: 1626550157,
  timestamp: 1626550156,
  type: 'image/jpeg',
  },
},

【问题讨论】：

标签： android react-native android-studio

【解决方案1】：

您需要在CameraRoll.getPhotos 中传递include 参数。要获得高度和宽度，您必须通过 ["imageSize"] 参数

【讨论】：