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"/> -->
-
最后确定是权限设置的问题