加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

#React Native#111图片遍历,存取<1>

(2017-11-22 14:30:23)
分类: 计算机相关

CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前,你需要先链接RCTCameraRoll库,具体做法请参考链接原生库文档。

译注:本模块只提供了基本的访问图片的功能,并没有提供相册界面。对于多数开发者来说,可能react-native-image-picker的功能更为完整易用。

iOS 10的权限要求

从iOS10开始,访问相册需要用户授权。你需要在Info.plist中添加一条名为NSCameraUsageDescription的键,然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在Xcode中实际会显示为Privacy - Camera Usage Description

故此,图片的读取使用react-native-image-picker 是后面常用的方法。

https://github.com/react-community/react-native-image-picker 这个是对应git 库。

里面包含了具体使用和安装方法。

Usage

var ImagePicker = require('react-native-image-picker');

// More info on all the options is below in the README...just some common use cases shown here

var options = {

  title: 'Select Avatar',

  customButtons: [

    {name: 'fb', title: 'Choose Photo from Facebook'},

  ],

  storageOptions: {

    skipBackup: true,

    path: 'images'

  }

};


 

ImagePicker.showImagePicker(options, (response) => {

  console.log('Response = ', response);


  if (response.didCancel) {

    console.log('User cancelled image picker');

  }

  else if (response.error) {

    console.log('ImagePicker Error: ', response.error);

  }

  else if (response.customButton) {

    console.log('User tapped custom button: ', response.customButton);

  }

  else {

    let source = { uri: response.uri };


    // You can also display the image using data:

    // let source = { uri: 'data:image/jpeg;base64,' + response.data };


    this.setState({

      avatarSource: source

    });

  }

});

Then later, if you want to display this image in your render() method:


 

Directly Launching the Camera or Image Library


To Launch the Camera or Image Library directly (skipping the alert dialog) you can do the following:


// Launch Camera:

ImagePicker.launchCamera(options, (response)  => {

  // Same code as in above section!

});


// Open Image Library:

ImagePicker.launchImageLibrary(options, (response)  => {

  // Same code as in above section!

 

});

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有