React-native Multi-image selection, picture clipping (support Ad/ios picture Count control)

Source: Internet
Author: User

Nonsense:

Currently about RN more well-known and well-packaged picture selection control a lot, but can support multi-image upload, the number of control compatible ios/ad is very few, and today introduced this framework can be achieved: Picture clipping, maximum number of pictures limit, photo, local photo album and other functions.

Effect:

Introduction to use:

principle:react-native-syan-image-picker Multi-image selector:
Android based on Pictureselector 2.0
IOS based on Tzimagepickercontroller 1.9.0

ios/android Configuration: specific steps refer to: Https://github.com/syanbo/react-native-syan-image-picker

Core code:

Import imagepicker from ' React-native-syan-image-picker '/** * Default parameters*/Const Options={imagecount:6,//Maximum number of images selected, default 6Iscamera:true,//whether to allow users to take photos internally, by default TrueIscrop:false,//whether to allow clipping, default falseCROPW: ~ ~ (Width * 0.6),//clipping width, default screen width 60%Croph: ~ ~ (Width * 0.6),//crop height, default screen width 60%Isgif:false,//whether to allow GIF selection, default false, no callback GIF dataShowcropcircle:false,//whether to display a circular cropping area, false by defaultShowcropframe:true,//Show clipping area, default TrueShowcropgrid:false     //whether to hide the crop area grid, false by default  }; /** * 1, in the form of callback, the album parameter temporarily supports only the attributes listed in the default parameters; * 2, callback form: Showimagepicker (Options, (err, selectedphotos) = { }) * 1) Select the picture succeeds, err is null,selectedphotos as the selected picture array * 2), ERR returns "Cancel", Selectedphotos will be undefined * on demand to determine the value of each parameter, ensure that the call normal  , Example Usage: * Showimagepicker (Options, (err, Selectedphotos) = {* if (err) {*///     Cancel selection * return; *} *//Select Success *}) * * @param {Object} options album parameter * @param {Function} Callbac K success, or failure callback*/     /** * 1 in promise form, the album parameter temporarily only supports the properties listed in the default parameters, * 2, how to use * 1) async/await * Handleselectphoto = AS      Ync () = {* try {* Const photos = await syimagepicker.asyncshowimagepicker (options); *//Select Success *} catch (Err) {*//deselect, err.message to "Cancel" *} *} * 2)      Promise.then form * Handleselectphoto = () = {* Syimagepicker.asyncshowimagepicker (options) * . Then (Photos = {*//Select Success *}) *. catch (Err = {*//deselect, Err.mes Sage for "Cancel" *}) *} * @param {object} options album parameter * @return {Promise} returns a Promise object*/

To this end, the overall use is very convenient, such as the use of questions or questions welcome comments Message ~

React-native Multi-image selection, picture clipping (support Ad/ios picture Count control)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.