React-Native react-native-image-picker 使用

组件的Github地址 https://github.com/react-community/react-native-image-picker

使用方式: 

1) 添加依赖库

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

        react-native link react-native-image-crop-picker 

配置ios/安卓

适配iOS

iOS添加比较简单:

1)首先找到plist文件,添加相册和相机的权限。

React-Native react-native-image-picker 使用_第1张图片

  NSPhotoLibraryUsageDescription

  App需要您的同意,才能访问相册

  NSCameraUsageDescription

  App需要您的同意,才能访问相机

 NSMicrophoneUsageDescription

  App需要您的同意,才能访问麦克风

适配安卓:

1)添加权限在/android/app/src/main/AndroidManifest.xml文件中添加、



React-Native react-native-image-picker 使用_第2张图片

2)android/settings.gradle文件中

include ':react-native-image-picker'

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



3)android/app/build.gradle文件的dependencies中

 compile project(':react-native-image-picker')


React-Native react-native-image-picker 使用_第3张图片

4)/android/app/src/main/java/com/newredsj/MainApplication.java文件中

import com.imagepicker.ImagePickerPackage;

newImagePickerPackage()


React-Native react-native-image-picker 使用_第4张图片

人生啊,处处是坑啊,以为就好啦。报错疯狂报错。。。

1) 需要引入头文件。

2)一看iOS 确实好了,也可以用了,再一看安卓。我的天。


React-Native react-native-image-picker 使用_第5张图片

飘红一片。解决办法

先link一下 react-native link react-native-image-crop-picker

然后切记切记不要 直接reload安卓。

从新运行安卓react-native run-android 。

这时你就会发现你搞定了。 人生啊处处是坑,rn就是不断的填坑找坑。


React-Native react-native-image-picker 使用_第6张图片
React-Native react-native-image-picker 使用_第7张图片

代码:


React-Native react-native-image-picker 使用_第8张图片
React-Native react-native-image-picker 使用_第9张图片

你可能感兴趣的:(React-Native react-native-image-picker 使用)