ReactNative: 使用第三方库图像选择器react-native-image-picker

最新推荐文章于 2025-03-17 21:14:00 发布

前端妹子

最新推荐文章于 2025-03-17 21:14:00 发布

阅读量737

点赞数

分类专栏： rn

本文链接：https://blog.csdn.net/BIBIBIA/article/details/119353994

版权

rn 专栏收录该内容

1 篇文章

订阅专栏

文章目录

1.安装
2. 使用

1.安装

//安装（本人安装的是低版本的：0.28.0）
 npm install react-native-image-picker@0.28.0 --save
//链接 (系统会自动在xcode中导入xcodeproj工程和.a静态包， link后面可以跟具体的库名，也可以不用跟)
 npx react-native link react-native-image-picker@0.28.0
 

···

2. 使用

 //选择图片 就是点击加号的时候
_showImagePicker(){

    //配置选项
    const options = {
        title: '选择图片',
        cancelButtonTitle: '取消',
        takePhotoButtonTitle: '拍照',
        chooseFromLibraryButtonTitle: '图库',
        customButtons: [
            {name: 'share photo', title: '分享'},
        ],
        cameraType: 'back', //相机的摄像头是前面后面
        mediaType: 'photo',
        videoQuality: 'high',
        durationLimit: 10,
        maxWidth: 300,
        maxHeight: 300,
        quality: 0.8,
        angle: 0,
        allowsEditing: false,
        noData: false,
        storageOptions: {
            skipBackup: true
        }
        saveToPhotos：//保存到相册
    };

    //回调数据
    ImagePicker.showImagePicker(options, (response => {
         console.log("response: "+response);
    }))
}

//打开相机
_launchCamera(){

    //配置选项
    const options = {
        cameraType: 'front',  //前置摄像头
        mediaType: 'photo'    //进行拍照
    };

    //回调数据
    ImagePicker.launchCamera(options, (response => {
        console.log("response: "+response);
    }))
}

//打开图库
_launchImageLibrary(){

    //配置选项
    const options = { mediaType: 'photo' };

    //回调数据
    ImagePicker.launchImageLibrary(options, (response => {
        console.log("response: "+response);
    }))
}