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

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) => {

//响应结果处理参考上面样例

});

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