react native 之 react-native-image-picke的详细使用图解-白红宇

react native 之 react-native-image-picke的详细使用图解

阅读量：4086 次

发布时间：2019-05-25

本文共 2254 字，大约阅读时间需要 7 分钟。

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

http://www.cnblogs.com/shaoting/p/6148085.html

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

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

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

2. 对于github上介绍的link命令,我并没有使用,所以跳过

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

iOS:

In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>

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

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地址:

你可能感兴趣的文章