0
点赞
收藏
分享

微信扫一扫

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

祈澈菇凉 2022-07-12 阅读 79


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


​​文档地址​​​ 我使用的版本为​​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;


举报

相关推荐

0 条评论