React Native - 使用图片选择器react-native-image-picker拍照、选照片

http://www.hangge.com/blog/cache/detail_1617.html

React Native - 使用图片选择器react-native-image-picker拍照、选照片

  发布：2018/3/7

有时我们程序中需要提供用户上传照片的功能。照片可以从设备相册中选择，也可以使用摄像头直接拍摄。这个功能使用  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

1	npm install react-native-image-picker @latest  --save

（2）接着运行如下命令链接相关的依赖库：

1	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）样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

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，直接启动相机或访问相册

上面的样例中我们是先弹出个选择菜单，让用户决定是拍照，还是从相册中选择图片。
其实我们也可以跳过这个步骤，直接调用摄像头拍照，或者直接打开相册让用户选择照片。

1 2 3 4 5 6 7 8 9

//启动相机拍照 ImagePicker.launchCamera(options, (response)  => {      //响应结果处理参考上面样例 });   //打开系统相册 ImagePicker.launchImageLibrary(options, (response)  => {      //响应结果处理参考上面样例 });

原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1617.html