Socket
Socket
Sign inDemoInstall

@uiw/react-native-image-picker

Package Overview
Dependencies
11
Maintainers
2
Versions
17
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-native-image-picker

基于 React Native 的上传图片组件


Version published
Maintainers
2
Weekly downloads
1
decreased by-83.33%

Weekly downloads

Readme

Source

ImagePicker 图片上传

上传图片/预览图片/保存图片

使用本组件需要单独安装

yarn add @uiw/react-native-image-picker react-native-image-picker @react-native-camera-roll/camera-roll react-native-image-viewing

该组件依赖

  • 图片上传 react-native-image-picker
  • 图片预览 react-native-image-viewing
  • 图片保存 @react-native-camera-roll/camera-roll

权限

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_IMAGESREAD_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;
  /** 当前选择的图片uri */
  value?: string[];
  /** 其他图片自定义配置,详细参考react-native-image-picker的option配置 */
  options?: CameraOptions;
  /** 上传图片后是否在背景图展示,如果为 true 上传后会自动展示上传图片(此时只能上传一张) */
  showUploadImg?: boolean;
  /** 上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传,同时可以在里面执行一些上传提示操作 */
  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;
  /** 预览图片,Modal presentation style: default: fullScreen Android:用于overFullScreen隐藏StatusBar */
  presentationStyle?: ModalProps['presentationStyle'];
  /** 预览图片,动画模态呈现:默认fade */
  animationType?: ModalProps['animationType'];
  /** 预览图片,背景色(#000000EE) */
  backgroundColor?: string;
  /** 预览图片,向上或向下滑动关闭模式:默认true */
  swipeToCloseEnabled?: boolean;
  /** 预览图片,通过双击缩放图像:默认true */
  doubleTapToZoomEnabled?: boolean;
  /** 预览图片,在调用 onLongPress 之前以毫秒为单位的延迟:默认800 */
  delayLongPress?: number;
  /** 预览图片,标头组件,imageIndex作为道具获取当前 */
  HeaderComponent?: ComponentType<{
    imageIndex: number;
  }>;
  /** 预览图片,页脚组件,imageIndex作为道具获取当前 */
  FooterComponent?: ComponentType<{
    imageIndex: number;
  }>;
}>;


export type useImageProps = {
  /** 成功回调 */
  onSuccess?: (files: File[]) => void;
  /** 取消回调 */
  onCancel?: () => void;
  /** 错误回调 */
  onError?: (error: ErrorCode) => void;
  /** 授权失败的回调 */
  onGrantFail?: () => void;
  /** 其他图片自定义配置,详细参考react-native-image-picker的option配置 */
  options?: CameraOptions
}

Keywords

FAQs

Last updated on 10 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc