美文网首页
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