版权声明:本人原创,码字辛苦,整理代码更是辛苦,转发请说明原处https://blog.csdn.net/qq_37815596谢谢! https://blog.csdn.net/qq_37815596/article/details/89405787
CameraRoll目前仅支持ios
一、React Native - 使用CameraRoll将图片保存到本地相册
- 重要代码
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
CameraRoll,
} from 'react-native';
//网络图片地址
var imgURL = "https://i.ibb.co/mNwrtG9/pig.jpg"
//默认应用的容器组件
class App extends Component {
//保存图片
saveImg(img) {
console.log("saveImg",img)
var promise = CameraRoll.saveToCameraRoll(img);
promise.then(function(result) {
alert('保存成功!地址如下:\n' + result);
}).catch(function(error) {
alert('保存失败!\n' + error);
});
}
//渲染
render() {
return (
<View style={styles.container}>
<View style={styles.image}>
<Image style={styles.img}
source={{uri: imgURL}}
resizeMode="contain" />
</View>
<View>
<Text onPress={this.saveImg.bind(this, imgURL)} style={[styles.saveImg]}>
保存图片到相册
</Text>
</View>
</View>
);
}
}
export default App;
//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 30,
alignItems:'center'
},
image:{
borderWidth:1,
width:300,
height:100,
borderRadius:5,
borderColor:'#ccc'
},
img:{
height:98,
width:300,
},
saveImg:{
height:30,
padding:6,
textAlign:'center',
backgroundColor:'#3BC1FF',
color:'#FFF',
marginTop:10,
}
});
- 引入CameraRoll之后,npm install
- 如果要在 iOS 上使用这个模块,我们首先要链接 RCTCameraRoll 库
从工程文件夹下node_modules/react-native/Libraries/CameraRoll按照下图所示,将对应目标移到xcode打开的项目下,Libraries下方
第二步 在 Build Phases -> Link Binary With Libraries 里添加 libRCTCameraRoll.a
- 配置完成,Xcode中Build一下项目,重新运行项目
- 运行
- 出现问题,点击保存图片,然后发生闪退现象
由于苹果安全策略更新,还需要在 Info.plist 配置请求照片相的关描述字段
从 iOS 10 开始,访问相册需要用户授权。你需要在Info.plist中添加一条名为NSPhotoLibraryUsageDescription的键,然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为Privacy - Photo Library Usage Description。
从 iOS 11 开始,如果需要保存图片,则需要额外申请用户授权。你需要在Info.plist中添加一条名为NSPhotoLibraryAddUsageDescription的键,然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为Privacy - Photo Library Additions Usage Description。而名为NSPhotoLibraryUsageDescription的键此时仅控制相册的读取。具体说明请翻阅官方文档搜索相关键值。
- 效果图
二、React Native - 使用CameraRoll获取相册图片、并显示
具体配置参照前面即可
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
CameraRoll,
} from 'react-native';
//照片获取参数
var fetchParams = {
first: 6,
groupTypes: 'All',
assetType: 'Photos'
}
//默认应用的容器组件
class App extends Component {
//构造函数
constructor(props) {
super(props);
this.state = {
photos: null
};
}
//页面的组件渲染完毕(render)之后执行
componentDidMount() {
var _that = this;
//获取照片
var promise = CameraRoll.getPhotos(fetchParams)
promise.then(function (data) {
var edges = data.edges;
var photos = [];
for (var i in edges) {
photos.push(edges[i].node.image.uri);
}
_that.setState({
photos: photos
});
}, function (err) {
alert('获取照片失败!');
});
}
//渲染
render() {
var photos = this.state.photos || [];
var photosView = [];
for (var i = 0; i < 6; i += 2) {
photosView.push(
<View key={i} style={styles.row}>
<View style={styles.flex}>
<Image resizeMode="stretch" style={styles.image} source={{ uri: photos[i] }} />
</View>
<View style={styles.flex}>
<Image resizeMode="stretch" style={styles.image} source={{ uri: photos[i + 1] }} />
</View>
</View>
)
}
return (
<ScrollView>
<View style={styles.container}>
{photosView}
</View>
</ScrollView>
);
}
}
export default App;
//样式定义
const styles = StyleSheet.create({
flex: {
flex: 1
},
container: {
flex: 1,
paddingTop: 30,
alignItems: 'center'
},
row: {
flexDirection: 'row'
},
image: {
height: 120,
marginTop: 10,
marginLeft: 5,
marginRight: 5,
borderWidth: 1,
borderColor: '#ddd'
},
});