ImagePicker 图片上传
上传图片/预览图片/保存图片
使用本组件需要单独安装
yarn add @uiw/react-native-image-picker react-native-image-picker @react-native-camera-roll/camera-roll react-native-image-viewing
该组件依赖
权限
ios
请在ios/<应用名称>/Info.plist
中添加以下代码
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app requires access to the photo.</string>
android
请在android/app/src/main/AndroidManifest.xml
<manifest>
标签下添加以下代码
Android 13以下
在 Android 13以下,记得将android:requestLegacyExternalStorage="true"
属性添加到<application>
中来支持 Android 10
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Android 13以上
在 Android 13以上,READ_EXTERNAL_STORAGE已
已经被READ_MEDIA_IMAGES
和 READ_MEDIA_VIDEO
取代
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
ImagePicker 基本用法
import React from 'react';
import ImagePicker, { File } from '@uiw/react-native-image-picker';
import { Pressable,View } from 'react-native';
const Demo = () => {
return (
<View>
<ImagePicker
upload={async(file: File[]) => {
let imageList: string[] = [];
await file.forEach(file => imageList.push(file.uri));
return imageList;
}}
selectionLimit={2}
/>
</View>
)
}
}
useImage 基本用法
import React from 'react';
import { useImage } from '@uiw/react-native-image-picker';
import { Pressable,View } from 'react-native';
const Demo = () => {
const { launchLibrary, launchCamera } = useImage({
onSuccess: (result) => {
console.log('result', result);
}
})
return (
<View>
<Pressable onPress={launchLibrary}><Text color="primary_background">打开相册</Text></Pressable>
<Pressable onPress={launchCamera}><Text color="primary_background">打开摄像头</Text></Pressable>
</View>
)
}
}
参数
组件继承@react-native-camera-roll/camera-roll
export interface File {
fileName: string;
fileType: string;
uri: string;
fileSize?: number;
}
export declare type ImagePickerProps = PropsWithChildren<{
width?: number;
height?: number;
value?: string[];
options?: CameraOptions;
showUploadImg?: boolean;
beforeUpload?: (file: File[]) => boolean | ((file: File) => Promise<boolean>);
upload?: (file: File[]) => Promise<string[]>;
uploadFinish?: (result?: string[] | undefined) => void;
onCancel?: (response: ImagePickerResponse) => void;
onFail?: (response: ImagePickerResponse) => void;
onGrantFail?: () => void;
onSave?: ((image: any) => void) | undefined;
libraryRationale?: Rationale;
cameraRationale?: Rationale;
launchLibraryText?: string;
launchCameraText?: string;
selectionLimit?: number;
disabled?: boolean;
readOnly?: boolean;
maxCount?: number | undefined;
onLongPress?: (image: ImageSource) => void;
onImageIndexChange?: (imageIndex: number) => void;
presentationStyle?: ModalProps['presentationStyle'];
animationType?: ModalProps['animationType'];
backgroundColor?: string;
swipeToCloseEnabled?: boolean;
doubleTapToZoomEnabled?: boolean;
delayLongPress?: number;
HeaderComponent?: ComponentType<{
imageIndex: number;
}>;
FooterComponent?: ComponentType<{
imageIndex: number;
}>;
}>;
export type useImageProps = {
onSuccess?: (files: File[]) => void;
onCancel?: () => void;
onError?: (error: ErrorCode) => void;
onGrantFail?: () => void;
options?: CameraOptions
}