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

明知山

发布于 2021-07-08 07:32:18

2K00

代码可运行

文章被收录于专栏：前端开发随笔前端开发随笔

运行总次数：0

代码可运行

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

npm install react-native-image-picker -s

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;