当前位置:

React Native Image Picker使用笔记

访客 2024-04-22 1215 0

1.ReactNativeImagePicker简介

这是一个用于选择手机上的图片或视频的组件

官方github仓库地址注意我当前使用的reactnative版本为:"react-native":"0.63.4"

2.安装

npmireact-native-image-picker

3.链接库(RN版本在0.6以上的可以忽略)3.1android\settings.gradleinclude':react-native-image-picker'project(':react-native-image-picker').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-image-picker/android')3.2android\app\build.gradledependencies{implementationproject(':react-native-image-picker')}3.3设置AndroidManifest.xml<manifestxmlns:android="http://schemas.android.com/apk/res/android"package="com.social_app"xmlns:tools="http://schemas.android.com/tools">................<uses-permissionandroid:name="android.permission.CAMERA"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-sdktools:overrideLibrary="com.imagepicker"/><applicationandroid:requestLegacyExternalStorage="true">................</application></manifest>3.4如果你的RN版本大于0.6手动进行了链接之后可能会报错。应该是0.6版本以上的版本,引入大多数的第三方包都不需要手动链接。//android\app\src\main\java\com\social_app\MainApplication.javaimportcom.imagepicker.ImagePickerPackage;//<--addthisimportpublicclassMainApplicationextendsApplicationimplementsReactApplication{@OverrideprotectedList<ReactPackage>getPackages(){returnArrays.<ReactPackage>asList(newMainReactPackage(),newImagePickerPackage(),//<--addthisline//ORifyouwanttocustomizedialogstylenewImagePickerPackage(R.style.my_dialog_style));}}//android\app\src\main\java\com\social_app\MainActivity.java//1.添加以下两行:importcom.imagepicker.permissions.OnImagePickerPermissionsCallback;//<-addthisimportimportcom.facebook.react.modules.core.PermissionListener;//<-addthisimportpublicclassMainActivityextendsReactActivity{//2.添加如下一行:privatePermissionListenerlistener;//<-addthisattribute/***ReturnsthenameofthemaincomponentregisteredfromJavaScript.*Thisisusedtoschedulerenderingofthecomponent.*/@OverrideprotectedStringgetMainComponentName(){return"native_camera";}}4.使用过程中可能会遇到的问题4.1、报错提示image-picker和sdk版本问题,可以打开你项目下android/app/src/main/AndroidManifest.xml文件添加以下两行代码:

xmlns:tools="http://schemas.android.com/tools"<uses-sdktools:overrideLibrary="com.imagepicker"/>4.2.调试错误
  • Task:app:processDebugManifestFAILED

错误的原因:其实这种Manifestmerger可以归结为,AndroidManifest.xml或者build.gradle中的配置问题。详细错误,可看gradleconsole即在as右下角位置。

4.3打包错误
  • 原因:

这个问题原本不是rn版本的问题,原因是0.61.3将AndroidSDK的版本更新到28了,这与有些原生代码的插件不兼容了,因为第三方更新不及时,SDK还是旧的版本。

修改这几个地方即可

  • 参考ReactNative打包错误:Executionfailedfortask':xxxxx:verifyReleaseResources'.
4.4参考

react-native-image-picker2.x版本和3.x版本(最新版本)的使用详解

错误解析

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~