码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNative 0.6x 使用react-native-image-picker

时间:2021-02-03 10:48:15      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:dia   esc   false   height   dep   添加   title   image   you   

react-native-image-picker组件可以从相册、相机或本地目录选取图片。

我使用的版本

"dependencies": {
    "react": "16.8.1",
    "react-native": "0.61.2",
    "react-native-image-picker": "2.3.4"
  }

1、安装

yarn add react-native-image-picker@0.61.2

2、Android 配置

 在 AndroidManifest.xml 添加权限

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

3、IOS配置

cd ios && pod install

修改 Info.plist 添加权限描述

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
  </dict>
</plist>

4、使用

import ImagePicker from ‘react-native-image-picker‘;
const options = {
    title: ‘选择图片‘,
    cancelButtonTitle: ‘取消‘,
    takePhotoButtonTitle: ‘拍照‘,
    chooseFromLibraryButtonTitle: ‘图片库‘,
    cameraType: ‘back‘,
    mediaType: ‘photo‘,
    videoQuality: ‘high‘,
    durationLimit: 10,
    maxWidth: 600,
    maxHeight: 600,
    aspectX: 2,
    aspectY: 1,
    quality: 0.8,
    angle: 0,
    allowsEditing: false,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: ‘images‘
    }
};

ImagePicker.showImagePicker(options, (response) => {
    //console.log(‘Response = ‘, response);

    if (response.didCancel) {
        console.log(‘User cancelled image picker‘);
    } else if (response.error) {
        console.log(‘ImagePicker Error: ‘, response.error);
    } else if (response.customButton) {
        console.log(‘User tapped custom button: ‘, response.customButton);
    } else {
        const source = { uri: response.uri };
        console.log(source)
        // You can also display the image using data:
        // const source = { uri: ‘data:image/jpeg;base64,‘ + response.data };

        this.setState({
            avatarSource: source,
        });
    }
});

完~

官方文档https://github.com/react-native-image-picker/react-native-image-picker/blob/v2.3.4/docs/Install.md

ReactNative 0.6x 使用react-native-image-picker

标签:dia   esc   false   height   dep   添加   title   image   you   

原文地址:https://www.cnblogs.com/dch0/p/14363193.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!