React Native - 使用图片选择器react-native-image-picker拍照、选照片
作者:hangge | 2017-04-20 08:10
有时我们程序中需要提供用户上传照片的功能。照片可以从设备相册中选择,也可以使用摄像头直接拍摄。这个功能使用 react-native-image-picker 库就可以很方便的实现。
1,react-native-image-picker介绍
- react-native-image-picker 是一个第三方的开源库,它提供了原生的 UI 界面供用户选择图片或视频。图片或视频的来源可以是系统相簿,也可以是相机直接拍摄。
- 使用 react-native-image-picker 我们不必关心如何与设备相册、摄像头如何交互,用户操作完毕后我们就可以直接得到资源的 URI 地址、或者 base64 字符串(限图片)。
- GitHub 主页地址:https://github.com/marcshilling/react-native-image-picker
2,安装配置
(1)首先在“终端”中进入项目目录,然后执行如下命令安装最新版本的 react-native-image-picker
npm install react-native-image-picker @latest --save |
(2)接着运行如下命令链接相关的依赖库:
react-native link |
(3)由于我们需要调用摄像头拍照、录像,同时拍完还要保存到相册中。因此需要在 Info.plist 里配置请求摄像头、麦克风、及照片的相关描述字段:
- Privacy - Camera Usage Description
- Privacy - Photo Library Usage Description
- Privacy - Microphone Usage Description
3,使用样例
(1)效果图
- 点击“选择照片”按钮,界面底部出现来源选择菜单。用户可以自行选择拍照、还是从相册中选择。
- 菜单中我还添加了个自定义按钮“hangge.com图片”,点击会有响应事件。
- 选择照片选择或者拍摄完毕后,会将最终的图片显示在 Image 组件里。
(2)样例代码
import React, { Component } from 'react' ; import { AppRegistry, StyleSheet, Text, View, Image, AlertIOS } from 'react-native' ; //图片选择器 var ImagePicker = require( 'react-native-image-picker' ); //图片选择器参数设置 var options = { title: '请选择图片来源' , cancelButtonTitle: '取消' , takePhotoButtonTitle: '拍照' , chooseFromLibraryButtonTitle: '相册图片' , customButtons: [ {name: 'hangge' , title: 'hangge.com图片' }, ], storageOptions: { skipBackup: true , path: 'images' } }; //默认应用的容器组件 class App extends Component { //构造函数 constructor(props) { super (props); this .state = { avatarSource: null }; } //渲染 render() { return ( <View style={styles.container}> <Text style={styles.item} onPress={ this .choosePic.bind( this )}>选择照片</Text> <Image source={ this .state.avatarSource} style={styles.image} /> </View> ); } //选择照片按钮点击 choosePic() { ImagePicker.showImagePicker(options, (response) => { console.log( 'Response = ' , response); if (response.didCancel) { console.log( '用户取消了选择!' ); } else if (response.error) { alert( "ImagePicker发生错误:" + response.error); } else if (response.customButton) { alert( "自定义按钮点击:" + 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 }); } }); } } //样式定义 const styles = StyleSheet.create({ container:{ flex: 1, marginTop:25 }, item:{ margin:15, height:30, borderWidth:1, padding:6, borderColor: '#ddd' , textAlign: 'center' }, image:{ height:198, width:300, alignSelf: 'center' , }, }); AppRegistry.registerComponent( 'ReactDemo' , () => App); |
4,直接启动相机或访问相册
上面的样例中我们是先弹出个选择菜单,让用户决定是拍照,还是从相册中选择图片。其实我们也可以跳过这个步骤,直接调用摄像头拍照,或者直接打开相册让用户选择照片。
//启动相机拍照 ImagePicker.launchCamera(options, (response) => { //响应结果处理参考上面样例 }); //打开系统相册 ImagePicker.launchImageLibrary(options, (response) => { //响应结果处理参考上面样例 }); |
全部评论(0)