zoukankan      html  css  js  c++  java
  • 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可以支持从相册中获取多张图片。

  • 相关阅读:
    LA 2038 Strategic game(最小点覆盖,树形dp,二分匹配)
    UVA 10564 Paths through the Hourglass(背包)
    Codeforces Round #323 (Div. 2) D 582B Once Again...(快速幂)
    UVALive 3530 Martian Mining(贪心,dp)
    UVALive 4727 Jump(约瑟夫环,递推)
    UVALive 4731 Cellular Network(贪心,dp)
    UVA Mega Man's Mission(状压dp)
    Aizu 2456 Usoperanto (贪心)
    UVA 11404 Plalidromic Subsquence (回文子序列,LCS)
    Aizu 2304 Reverse Roads(无向流)
  • 原文地址:https://www.cnblogs.com/maoyazhi/p/5411750.html
Copyright © 2011-2022 走看看