前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Rn引入react-native-image-picker图片上传

Rn引入react-native-image-picker图片上传

作者头像
明知山
发布2021-07-08 15:32:18
1.9K0
发布2021-07-08 15:32:18
举报
文章被收录于专栏:前端开发随笔
在这里插入图片描述
在这里插入图片描述

文档地址 我使用的版本为4.0.4目前最新版本 网上有些案例写法有很大不同,可能跟版本不同有关

代码语言:javascript
复制
npm install react-native-image-picker -s
代码语言:javascript
复制
import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
const Photo = () => {
    const [imgs, setImgs] = useState([])

    const addPhoto = () => {
        launchImageLibrary({
            mediaType: "photo", // 'photo' or 'video' or 'mixed'
            selectionLimit: 0,// 1为一张,0不限制数量
            includeBase64: true
        }, res => {
            setImgs(res.assets)
        })
    }

    const addVideo = () => {
        launchImageLibrary({
            mediaType: "video",
            selectionLimit: 1,
        }, res => {
            console.log(res)
        })
    }

    const tackPhoto = () => {
        launchCamera({
            mediaType: "photo",
            cameraType: "back"
        }, res => {
            console.log(res)
        })
    }
    return (
        <View>
            <Button title="启动图库选择图像" onPress={() => addPhoto()}></Button>
            <Button title="启动图库选择视频" onPress={() => addVideo()}></Button>
            <Button title="启动相机拍摄图片" onPress={() => tackPhoto()}></Button>
            {
                imgs.map((item, index) => {
                    return (
                        <View key={index}>
                            <Image style={{ width: 50, height: 50 }} source={{ uri: item.uri }}></Image>
                        </View>
                    )
                })
            }
        </View>
    );
}

export default Photo;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/07/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档