返回 导航

React / React Native

hangge.com

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）

回到顶部