react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言：

　　目前关于rn比较知名并且封装好的图片选择控件很多，不过能同时支持多图片上传，个数控制兼容iOS/Ad的却寥寥无几，而今天介绍的这款框架可以实现：图片裁剪、最大图片个数限制、拍照、本地相册等功能。

效果：

使用简介：

原理：react-native-syan-image-picker多图片选择器：
　　Android 基于 PictureSelector 2.0
　　iOS 基于 TZImagePickerController 1.9.0

iOS/android配置：具体步骤参考：https://github.com/syanbo/react-native-syan-image-picker

核心代码：

import ImagePicker from 'react-native-syan-image-picker'
/**
* 默认参数
*/
const options = {
imageCount: 6,          // 最大选择图片数目，默认6
isCamera: true,         // 是否允许用户在内部拍照，默认true
isCrop: false,          // 是否允许裁剪，默认false
CropW: ~~(width * 0.6), // 裁剪宽度，默认屏幕宽度60%
CropH: ~~(width * 0.6), // 裁剪高度，默认屏幕宽度60%
isGif: false,           // 是否允许选择GIF，默认false，暂无回调GIF数据
showCropCircle: false,  // 是否显示圆形裁剪区域，默认false
showCropFrame: true,    // 是否显示裁剪区域，默认true
showCropGrid: false     // 是否隐藏裁剪区域网格，默认false
  };
/**
* 以Callback形式调用
* 1、相册参数暂时只支持默认参数中罗列的属性；
* 2、回调形式：showImagePicker(options, (err, selectedPhotos) => {})
*  1）选择图片成功，err为null，selectedPhotos为选中的图片数组
*  2）取消时，err返回"取消"，selectedPhotos将为undefined
*  按需判断各参数值，确保调用正常，示例使用方式：
*      showImagePicker(options, (err, selectedPhotos) => {
*          if (err) {
*              // 取消选择
*              return;
*          }
*          // 选择成功
*      })
*
* @param {Object} options 相册参数
* @param {Function} callback 成功，或失败回调
*/
/**
* 以Promise形式调用
* 1、相册参数暂时只支持默认参数中罗列的属性；
* 2、使用方式
*  1）async/await
*  handleSelectPhoto = async () => {
*      try {
*          const photos = await SYImagePicker.asyncShowImagePicker(options);
*          // 选择成功
*      } catch (err) {
*          // 取消选择，err.message为"取消"
*      }
*  }
*  2）promise.then形式
*  handleSelectPhoto = () => {
*      SYImagePicker.asyncShowImagePicker(options)
*      .then(photos => {
*          // 选择成功
*      })
*      .catch(err => {
*          // 取消选择，err.message为"取消"
*      })
*  }
* @param {Object} options 相册参数
* @return {Promise} 返回一个Promise对象
*/

小技巧：iOS拍照为英文，如果需要设置成中文简体，请看这篇：《iOS设置拍照retake和use按钮为中文简体》

到此已经结束了，总体来说使用还是很方便的，如有使用上的问题或者疑问欢迎评论留言~

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)相关推荐

native react 图片多选_react-native多图选择、图片裁剪(支持ad/ios图片个数控制)
import ImagePicker from 'react-native-syan-image-picker' /** * 默认参数*/const options={ imageCount:6, / ...
php 图片裁剪保存,PHP实现图片裁剪、添加水印效果代码
这篇文章主要介绍了PHP实现图片裁剪.添加水印效果代码,本文给出代码示例,代码中包含一些说明注释,需要的朋友可以参考下 3.PHP对图像的裁剪裁剪之前 header("content-ty ...
native react 图片裁剪,使用react-native-image-picker将图片上传到firebase
I've been trying to upload an image using firebase, React Native and react-native-image-picker. The ...
2021年，Flutter 与 React Native该如何选择？，安卓app开发教程
一.Flutter 应用的优势 =========================================================================== 1. 热重载 = ...
2021年，Flutter 与 React Native该如何选择？
????????关注后回复 "进群" ,拉你进程序员交流群???????? 作者 | Wasim Charoliya 译者 | 王强策划 | 田晓旭 2021 年,跨平台程序员之 ...
Flutter 与 React Native 该如何选择
跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了.前几年,React Native 还是开发人员的首选框架,但是自 2017 年 Flutter 发布 ...
android 裁剪图片工具,图片裁剪助手app下载-图片裁剪助手软件下载 v4.0安卓版_5577安卓网...
图片裁剪助手是款非常实用的图片编辑软件,这款软件能够根据图片的情况进行自由裁剪,类似PS的软件,能够让用户自由进行图片剪辑和抠图,还能自由压缩图片,自由设置图片的大小,非常实用的一款软件,快来下载吧! ...
android 仿照ios 图片选择,GitHub - wildma/PictureSelector: Android 图片选择器（仿 IOS 图片选择控件）...
PictureSelector Android 图片选择器(仿 IOS 图片选择控件) 效果图功能特点支持通过拍照获取图片支持通过相册获取图片支持图片是否裁剪两种场景支持仿 IOS 底部弹出 ...
python图片裁剪软件_python 实现图片裁剪小工具
实现:tkinter 画布上显示图片,按下鼠标左键并且移动,实现截图 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL ...

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言：

效果：

使用简介：

小技巧：iOS拍照为英文，如果需要设置成中文简体，请看这篇：《iOS设置拍照retake和use按钮为中文简体》

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)相关推荐

最新文章

热门文章