推荐项目:React Native Image Picker
React Native Image Picker 是一个React Native库,用于选择图片或视频。以下是如何使用它的示例代码:
首先,你需要安装这个库:
npm install react-native-image-picker
或者
yarn add react-native-image-picker
然后,你需要链接原生模块(对于React Native 0.60及以上版本,通常会自动链接):
npx react-native link react-native-image-picker
接下来,你可以在你的React Native代码中这样使用它:
import ImagePicker from 'react-native-image-picker';
// 选择单张图片
function selectSingleImage() {
const options = {
title: '选择图片',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择相册',
mediaType: 'photo',
};
ImagePicker.launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('用户取消了选择图片');
} else if (response.error) {
console.log('选择图片时发生错误', response.error);
} else {
console.log('选择的图片路径:', response.uri);
}
});
}
// 选择多张图片
function selectMultipleImages() {
const options = {
title: '选择图片',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择相册',
mediaType: 'photo',
multiple: true,
};
ImagePicker.launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('用户取消了选择图片');
} else if (response.error) {
console.log('选择图片时发生错误', response.error);
} else {
console.log('选择的图片路径数组:', response.uri);
}
});
}
// 选择视频
function selectVideo() {
const options = {
title: '选择视频',
takePhotoButtonTitle: '拍摄',
chooseFromLibraryButtonTitle: '选择相册',
mediaType: 'video',
};
ImagePicker.launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('用户取消了选择视频');
} else if (response.error) {
console.log('选择视频时发生错误', response.error);
} else {
console.log('选择的视频路径:', response.uri);
}
});
}
在使用之前,请确保你已经处理好了所有必要的权限请求。对于Android,你可能需要在AndroidManifest.xml
中添加相应的权限,并且可能需要使用类似react-native-permissions
这样的库来请求权限。对于iOS,Image Picker 使用Photos库,iOS 10+需要相册访问权限。
评论已关闭