zoukankan      html  css  js  c++  java
  • react native 之 react-native-image-picke的详细使用图解

    最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke.

    该插件可以同时给iOS和Android两个平台下使用,但是需要配置下各自平台下的文件,github上有详细的文字说明,但是本人对于文字向来无感,所以特地图解记录下配置说明和用法.

     1.   首先,安装下该插件:

    npm install react-native-image-picker@latest --save
    

     2.   先别link,先添加进来该库之后 再link.  

    下面对于各自平台进行配置即可.

    iOS:

    1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
    2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

     =>  打开Xcode打开项目,点击根目录,右键选择 Add Files to 'XXX',选中项目中的该路径下的文件即可:node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

          

    OK,添加进来之后,再进行 link命令.  react-native link react-native-image-picker 

    3.Add RNImagePicker.a to Build Phases -> Link Binary With Libraries

     

         

         4.For iOS 10+, Add the NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys to your Info.plist with strings describing why your app needs these permissions

    =>对于适配iOS10,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription

    iOS平台配置完毕.

    Android:

        1.Add the following lines to android/settings.gradle:

    include ':react-native-image-picker'
    project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
    

        2.Add the compile line to the dependencies in android/app/build.gradle:

    dependencies {
        compile project(':react-native-image-picker')
    }
    

      

         3.Add the required permissions in AndroidManifest.xml:

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

      

         4.Add the import and link the package in MainApplication.java:   

    import com.imagepicker.ImagePickerPackage;
    
    
    .........
    
    
    
     new ImagePickerPackage()

     

     

    OK,安卓这边也配置完毕.

    用法:

       配置弹出框信息

    import  ImagePicker from 'react-native-image-picker'; //第三方相机
    var photoOptions = {
        //底部弹出框选项
        title:'请选择',
        cancelButtonTitle:'取消',
        takePhotoButtonTitle:'拍照',
        chooseFromLibraryButtonTitle:'选择相册',
        quality:0.75,
        allowsEditing:true,
        noData:false,
        storageOptions: {
            skipBackup: true,
            path:'images'
        }
    }
    
     

    点击事件

    cameraAction = () =>{
             ImagePicker.showImagePicker(photoOptions,(response) =>{
                 console.log('response'+response);
                 if (response.didCancel){
                     return
                 }
             })
        }
    

      

    案例:

     

    demo地址:https://github.com/pheromone/mycamera

      

  • 相关阅读:
    再谈TextField
    IOS-TextField知多少
    leftBarButtonItems
    LeftBarButtonItems,定制导航栏返回按钮
    Apple Mach-O Linker (id) Error "_OBJC_CLASS...错误解决办法 Apple Mach-O Linker (id) Error "_OBJC_CLASS...错误解决办法
    Unrecognized Selector Sent to Instance问题之诱敌深入关门打狗解决办法
    UNRECOGNIZED SELECTOR SENT TO INSTANCE 问题快速定位的方法
    Present ViewController,模态详解
    UILABEL AUTOLAYOUT自动换行 版本区别
    iOS自动布局解决警告Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0
  • 原文地址:https://www.cnblogs.com/shaoting/p/6148085.html
Copyright © 2011-2022 走看看