推荐一款高效图像选择库:React Native Image Picker
React Native Image Picker 是一个React Native库,用于选择图片或视频。它提供了一个统一的API,可以在iOS和Android上获取图片。
以下是如何使用React Native Image Picker的示例代码:
首先,您需要安装库:
npm install react-native-image-picker
或者
yarn add react-native-image-picker
然后,您可能需要链接原生模块(如果你使用的是React Native <= 0.60):
react-native link react-native-image-picker
接下来,在代码中使用它:
import ImagePicker from 'react-native-image-picker';
// 选择图片
const selectImage = () => {
const options = {
quality: 1,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
},
};
ImagePicker.launchImageLibrary(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
console.log('You picked an image', response);
// 处理图片, response.uri是图片的本地URI
}
});
};
// 选择视频
const selectVideo = () => {
const options = {
maxDuration: 30,
};
ImagePicker.launchCamera(options, (response) => {
if (response.didCancel) {
console.log('User cancelled video picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
console.log('You picked a video', response);
// 处理视频, response.uri是视频的本地URI
}
});
};
// 在你的组件中使用
// 例如,在一个按钮点击事件中调用 selectImage 或 selectVideo
确保在使用之前,根据平台在android/app/src/main/AndroidManifest.xml
文件中添加必要的权限,以及在Info.plist
(iOS)中添加必要的usage description。
<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- iOS Info.plist -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library will be accessed for the first time</string>
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera will be accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone will be accessed for the first time</string>
这样,你就可以在React Native应用中方便地选择图片和视频了。
评论已关闭