1. 程式人生 > >react-native多圖選擇、圖片裁剪(支援ad/ios圖片個數控制)

react-native多圖選擇、圖片裁剪(支援ad/ios圖片個數控制)

前言:

  目前關於rn比較知名並且封裝好的圖片選擇控制元件很多,不過能同時支援多圖片上傳,個數控制相容iOS/Ad的卻寥寥無幾,而今天介紹的這款框架可以實現:圖片裁剪、最大圖片個數限制、拍照、本地相簿等功能。

效果:

      

使用簡介:

核心程式碼:

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物件 */

到此已經結束了,總體來說使用還是很方便的,如有使用上的問題或者疑問歡迎評論留言~

相關推薦

react-native選擇圖片裁剪(支持ad/ios圖片個數控制)

多圖片 reac 顯示 async object zimage ram 步驟 技術 扯淡:   目前關於rn比較知名並且封裝好的圖片選擇控件很多,不過能同時支持多圖片上傳,個數控制兼容iOS/Ad的卻寥寥無幾,而今天介紹的這款框架可以實現:圖片裁剪、最大圖片個數限制、拍照

react-native選擇圖片裁剪(支援ad/ios圖片個數控制)

前言:   目前關於rn比較知名並且封裝好的圖片選擇控制元件很多,不過能同時支援多圖片上傳,個數控制相容iOS/Ad的卻寥寥無幾,而今天介紹的這款框架可以實現:圖片裁剪、最大圖片個數限制、拍照、本地相簿等功能。 效果:        使用簡介: 核心程式碼: import ImageP

004-React-Native--選擇上傳

conf ack 資料 multiple spa pac .get end ext 參考資料:http://www.jianshu.com/p/488e62ed9656 一:使用react-native-image-crop-picker進行圖片選擇時,並沒有提供

react-native上傳 react-native-image-picker圖片上傳之個上傳圖片

話不多說 直接貼程式碼, 如有疑問 下方留言或者發郵箱 引入需要的元件 import ImagePicker2 from 'react-native-image-picker'; import RNHeicConverter from 'react-native

理解Android影象處理-拍照單/選擇器及影象優化

如以上DEMO截圖所示效果,我們對於這種類似的功能肯定不算陌生,因為這可以說是實際開發中一類非常常見的功能需求了。而關於它們的實現,其實主要涉及到的知識面應該就是 Android當中的影象處理了。簡單來說就比如:影象獲取(例如常見的設定頭像(獲取單

React-Native系列》26 ReactNative實現圖片上傳功能

在檢視ReactNative的官方文件的時候,你會發現其實Fackbook是沒有提供圖片上傳功能的。如果我們的專案裡需要使用圖片上傳(用JS 實現圖片上傳),那我們有沒有什麼辦法呢?解決方案:利用FormData物件,你可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XM

android選擇圖片/視訊 單選or選,以及視訊錄製。The is Android Image Selector。

PictureSelector 最近專案中用到多圖選擇上傳的需求,考慮到android機型眾多問題就自己花時間寫了一個,測試了大概60款機型,出現過一些問題也都一一修復了,基本上穩定了特分享出來,介面UI也是商用級的開發者不用在做太多修改了,介面高度自定義,可

android 仿微信選擇器(帶預覽照相功能)

實現了單選、多選 、拍照 、預覽 等功能;先上圖:      程式碼結構  下面不如正題: 一、新增依賴、許可權 1)新增以下依賴 dependencies { compile fileTree(dir: 'libs', include: ['*.jar'])

android選擇 圖片/視訊 單選or選,以及視訊錄製

最近專案中用到多圖選擇上傳的需求,隨後百度了一下用了別人寫的demo,發現在很多機型上各種不適,閃退等問題,嚴重影響使用,後面我自己寫了一個,公司20幾款手機全部通過,在騰訊雲測中也使用了4,50款手機測試,沒有發現問題,特分享出來。 功能特點: 1.適配android7

React-Native系列》3RN與native交互之CallbackPromise

pan resolv str string callback 多次調用 modules 函數 等待 接著上一篇《React-Native系列》RN與native交互與數據傳遞,我們接下來研究另外的兩種RN與Native交互的機制 一、Callback機制 首先Calllba

react native 中時間選擇外掛

npm install react-native-datepicker --save import DatePicker from 'react-native-datepicker'; <View> <DatePicker style={{width: 200}}

React Native 筆記之PropsStateRef使用

Props props是React元件的輸入內容。 它們是從父元件傳遞給子元件的資料。props 是隻讀的。 不應該以任何方式修改它們. 程式碼示例: import React, { Component ,PropTypes} from 'react'; import {

react native 下拉選擇

<ModalDropdown options={type} //下拉內容陣列 style={styles.modal} //按鈕樣式 dropdownStyle={[styles.dropdown,{height:32*type.length}]} /

OC 使用TZImagePickerController實現簡單的選擇檢視

1.使用pod在專案中匯入TZImagePickerController: pod 'TZImagePickerController' 2.建立檢視ImagePickView: @protocol ImagePickerViewDelegate <NSO

react-native 元件的匯入匯出

一、前言背景:   學習react native的關鍵在於元件,依靠元件的拼接達到想要的效果,由此可見,元件就像一塊塊功能各異的零件,最終搭建出我們想要的效果。   今天我們就從元件的匯入、匯出開始   下面是我們編寫react native程式碼時,很普遍的程式碼正規化: import Rea

React-Native系列》24 結合Demo學習Redux框架

8月的最後一天了,那就打響最後一炮吧! 我們介紹了Flux框架,我們打算在接下來的專案裡使用Redux框架,這兩天簡單學習了下Redux。打算結合一個Demo來講解。 還是先來說說概念吧。 Redux 三個基本原則 單一資料來源 整個應用的 state 被儲存在一棵 obj

react-native 下編寫工具Public類

在react-native開發中,一些常用到的方法函式,我們可以提取出來寫到一個公共的類裡面,方便不同頁面的呼叫。 首先、新建一個檔案 PublicUtils.js 裡面實現如下: let Pub

React Native 省市區地址選擇器(仿京東)

產品經理:“你明白吧,這裡向右劃可以出選單,然後需要一個閃爍的動畫,還有,我想這個tab可以拉下來,你懂吧? 設計師:“別廢話,把你要抄的產品給我看下。” … 接下來,我們仿一下別人家的地址挑選器 省市區資料格式的json檔案 import Re

React-Native系列》15 RN之可觸控元件

今天,我們來看下ReactNative提供的可觸控元件。 分別為:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。 TouchableWithoutFe

React-Native系列》4表單介面程式碼編寫

今天就開始投入到RN專案了,做後端出生,寫Android和iOS確實有點勉強,不過還是要把這段經歷記錄下來。 要實現的功能介面如下: 這個是最簡單的Form表單,第一步實現介面吧,不管點選效果,不管篩選控制元件...  思路: 我把這幾類控制元件分為了3類: 1、帶頭