React Native学习-调取摄像头第三方组件:react-native-image-picker

近期做的软件中图片处理是重点,那么自然也就用到了相机照相或者相册选取照片的功能。

react-native中有image-picker这个第三方组件,但是0.18.10这个版本还不是太支持iPad。

这个组件同时支持photo和video,也就是照片和视频都可以用这个组件实现。

安装

npm install --save react-native-image-picker

安装过之后要执行rnpm link命令

用法

 import ImagePickerManager from ‘NativeModules‘;
 
 当你想展示相机还是相册这个选择器时:(变量options还有其它的设置,一些使用它的默认值就可以满足我们的要求,以下是我使用到的)
var options = {
  title: ‘Select Avatar‘, // 选择器的标题,可以设置为空来不显示标题
  cancelButtonTitle: ‘Cancel‘,
  takePhotoButtonTitle: ‘Take Photo...‘, // 调取摄像头的按钮,可以设置为空使用户不可选择拍照
  chooseFromLibraryButtonTitle: ‘Choose from Library...‘, // 调取相册的按钮,可以设置为空使用户不可选择相册照片
  customButtons: {
    ‘Choose Photo from Facebook‘: ‘fb‘, // [按钮文字] : [当选择这个按钮时返回的字符串]
  },
  mediaType: ‘photo‘, // ‘photo‘ or ‘video‘
  videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘
  durationLimit: 10, // video recording max time in seconds
  maxWidth: 100, // photos only默认为手机屏幕的宽,高与宽一样,为正方形照片
  maxHeight: 100, // photos only
  allowsEditing: false, // 当用户选择过照片之后是否允许再次编辑图片
};
 
ImagePickerManager.showImagePicker(options, (response) => {
  console.log(‘Response = ‘, response);

  if (response.didCancel) {
    console.log(‘User cancelled image picker‘);
  }
  else if (response.error) {
    console.log(‘ImagePickerManager Error: ‘, response.error);
  }
  else if (response.customButton) {
    // 这是当用户选择customButtons自定义的按钮时,才执行
    console.log(‘User tapped custom button: ‘, response.customButton);
  }
  else {
    // You can display the image using either data:

    if (Platform.OS === ‘android‘) {
        source = {uri: response.uri, isStatic: true};
    } else {
        source = {
            uri: response.uri.replace(‘file://‘, ‘‘),
            isStatic: true
        };
    }

    this.setState({
      avatarSource: source
    });
  }
});
显示图片的方法:
<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

当然我们也有不想让用户选择的时候,而是直接就调用相机或者相册,这个组件中还有其它的函数:

// Launch Camera:
  ImagePickerManager.ImagePickerManager.launchCamera(options, (response)  => {
    // Same code as in above section!
  });

  // Open Image Library:
  ImagePickerManager.ImagePickerManager.launchImageLibrary(options, (response)  => {
    // Same code as in above section!
  });

更详细的可以查看它的官网:https://github.com/marcshilling/react-native-image-picker

这个组件只支持从相册中选取一张图片,如果满足不了需求,可以先学习了解一下官方版react-native的demo:里边有CameraRoll可以支持从相册中获取多张图片。

时间: 2024-11-07 15:22:04

React Native学习-调取摄像头第三方组件:react-native-image-picker的相关文章

React漫漫学习路之 利用Create React App命令创建一个React应用

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用. Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用.(如果你使用过vue-cli构建vue应用,那么此处可类比) 话不多说,直接开始. 安装 全局安装create-react-app npm install -g create-rea

react简单学习路线(实用版)

学习一门新的技术之前有必要了解一下该技术在专业领域的评价,使用的领域,以及整体的学习路线,总之尽可能多的在入坑之前了解相关方面的信息.不要什么都不去查就直接学了,这个是很愚蠢的!!!!! 首先来看一篇文章,它简单讲解了学习react的流程,确实很有帮助,看完之后再开始你的学习,这样会避免走很多的弯路. http://www.jianshu.com/p/ed55b366cd96 接下来可以去http://www.runoob.com/react/react-tutorial.html 这个地方学习

React Native学习-控制横竖屏第三方组件:react-native-orientation

在项目中,有时候可能会想使不同的页面显示的横竖屏也不一样,比如前一段我做的<广播体操>的项目,在首页面,肯定是想使页面为竖屏显示,但是播放页面要为横屏显示,即使用户的手机可以转屏,我们的播放页面也要是横屏显示. 有这样的需求,我们可以借助react-native的第三方组件,react-native-orientation. 官方文档:https://github.com/yamill/react-native-orientation 安装 1.如果项目正在运行,先关闭模拟器和终端: 2.执行

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

React Native学习(1):怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.

React Native学习提纲

当前版本最后修订日期: 2015年10月21日 版本 日期 说明 作者 1.0 2015-10-21 创建文档 罗晴明 一. React.js入门基础 1.基础HTML/CSS与基础开发工具使用 html基础doctype.常用标签.标签闭合.自定义属性 css基础选择器(id.class).常用样式.样式覆盖.行内样式.绝对与相对定位.flexbox布局 基础开发工具使用Chrome调试网页.使用Webstorm编辑代码.使用github管理代码与搜索问题 2.基础Javascript与Nod

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

react native 学习一(环境搭配和常见错误的解决)

react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2.nodejs.git.Android Studio.这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理. 软件装好了,就是环境变量设置了,添加AND

React Native学习-将 &#39;screen&#39;, &#39;window&#39; or a view生成图片

https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa 这是react-native自带的生成图片的属性,所以使用之前只需要引用UIManager属性即可: View生成图片: state = { uri: null }; takeToImage() { UIManager.takeSnapshot(this.refs.location, {format: 'png', qu