关于RN中图片访问的问题

1.遇到的问题：

在使用 react native 中的组件 Image 并配合 react-native-camera-roll 第三方库，实现获取手机（andorid）中的 “最近相册”的时候，使用 **save()** 方法可以成功将手机内存中的图片存储到手机存储空间中，但是当在使用**getPhotos()** 方法将从手机相册读取“最近相册” 的时候，图片并没有正常的展示出来……

2.相关代码（这里是官方提供的方法）

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <Button title="Load Images" onPress={this._handleButtonPress} />
     <ScrollView>
       {this.state.photos.map((p, i) => {
       return (
         <Image
           key={i}
           style={{
             width: 300,
             height: 100,
           }}
           source={{ uri: p.node.image.uri }}
         />
       );
     })}
     </ScrollView>
   </View>
 );
}

3.解决方案

• 打印 uri 看数据是否拿到，并设置了背景颜色方便查看，但是奇怪的是相关的地址是可以拿到的，但是并没有正常的渲染出来……

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LBVYjRMs-1685673268729)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1036bfcc-e239-4422-bfe5-5aac0e798759/e81d1e230d47e59e0afd97778c9cd516.jpg)]

• 可能是 Image 组件的 source 有问题，所以进行相关文档的查询

  source 的使用方式：

  1.加载本地图片

  （默认Image会去根据设备的分辨率自动匹配图片的大小，所以把test1@2x.png 和test1@3x.png同时放在assets目录下，而显示的时候不需要跟上@后面的文本，否则会 error）

  <Image source={ require('../assets/test1.png') } />
  

  2.加载网路图片

  （类似于：file:///XXXX/XXXX/2233.png ;这种图片应该也是使用 uri 方式进行加载）

  <Image source={{uri:'https://XXX/XXX/2233.png';}} />
  

• 很显然，我就是采用加载网络图片的方式进行的，但是依然没有办法将图片渲染出来，难道是协议的问题，因为一个是 http/https 协议一个是 file 协议，然后我将 file协议的图片换成http/https 协议的图片，结果图片真的渲染出来了，不过很快就排除了是协议的问题，因为当我在手机（android）浏览器中访问 file 协议的地址的时候，图片可以正常访问到。

• 权限问题？该demo已经设置了相关的权限，最重要的是 ‘允许读写手机存储’和‘允许拍摄照片和录制视频’，但是还是没有任何作用。

• android相关授权也已经进行了配置。

  		<!-- android 10.0- -->
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <!-- android 10.0+ -->
      <!-- <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
      <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
      <uses-permission android:name="android.permission.RECORD_AUDIO"/> -->
  

• 最后确定是权限设置的问题