美文网首页
React Native 访问相册与拍照,并且上传

React Native 访问相册与拍照,并且上传

作者: 小_蜡笔 | 来源:发表于2017-07-24 18:09 被阅读1845次

首先进到项目的根路径下 执行 npm install react-native-image-picker@latest --save命令


3B4C7639-396E-4BE5-8310-A90C692BA38E.png

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

A499C61A-B328-4965-8E37-08A4C16C2B96.png

然后进到项目的跟路径下面,执行react-native link

D440B3FD-2306-49F9-87B5-D8A13DD39EE4.png

添加访问权限
NSPhotoLibraryUsageDescription 和 NSCameraUsageDescription

AC5F7AE6-B135-4945-B0D9-87B5731901BF.png

ios配置完成。

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

59389728-8233-4BEE-9611-AC74D25FD710.png

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

D58EF4C7-5E33-4AF2-A2C7-1423E3122A71.png

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

A4D08C25-4856-4C20-8E85-D0A8340DE19E.png F008F5AA-555F-4316-BF07-4072118A05E5.png

安卓的配置完成

JS实现

56833D11-375C-48DF-AB0D-6C9A6C1B3306.png 2667166D-9E7A-495F-BB83-CD752D7016D7.png 2DCB4C8B-3A0B-432E-93CB-D6DD4341CB0C.png

上传图片的时候,只要得到图片的路径,RN就会把图片转成数据流,发送给后台。

相关文章

网友评论

      本文标题:React Native 访问相册与拍照,并且上传

      本文链接:https://www.haomeiwen.com/subject/rqabkxtx.html