Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@uiw/react-native-image-picker
Advanced tools
基于 React Native 的上传图片组件
Weekly downloads
Readme
上传图片/预览图片/保存图片
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/<应用名称>/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/app/src/main/AndroidManifest.xml
<manifest>
标签下添加以下代码
在 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以上,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"/>
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>
)
}
}
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
}
FAQs
基于 React Native 的上传图片组件
The npm package @uiw/react-native-image-picker receives a total of 1 weekly downloads. As such, @uiw/react-native-image-picker popularity was classified as not popular.
We found that @uiw/react-native-image-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.