CameraRoll详细介绍（代码+解析）

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'
  },
});

CameraRoll详细介绍（代码+解析）

猜你喜欢