React Native開源圖片縮放處理元件
尊重版權,轉載請註明出處
專案介紹
該元件進行封裝了Android平臺PhotoView和Universal-image-loader元件，進行實現影象縮放等功能。不過只是適配Android平臺
剛建立的React Native技術交流3群(496508742)歡迎各位大牛,React Native技術愛好者加入交流!
配置安裝
1.1.路徑切換到專案根目錄,執行如下命令進行安裝元件,點選進入例項程式碼
?| 1 |
npm
install --save react-native-image-zoom
|
1.2.在android/setting.gradle檔案中做如下修改
| 1 2 |
include
:react-native-image-zoom'
project(':react-native-image-zoom').projectDir
= file('../node_modules/react-native-image-zoom/android')
|
[注意].如果你的專案還包含了其他依賴庫，那麼該檔案中也包含了其他元件資訊
1.3.在android/app/build.gradle檔案做如下依賴設定(:react-native-image-zoom)
?| 1 2 3 |
dependencies
{
compile
project(':react-native-image-zoom')
}
|
1.4.在MainActivity.java中進行註冊元件(ReactImageZoom)
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
import
com.image.zoom.ReactImageZoom; //
add this import
public
class MainActivity extends ReactActivity {
//...
@Override
protected
List<ReactPackage> getPackages() {return
Arrays.<ReactPackage>asList(
new
MainReactPackage(),
new
ReactImageZoom() //
add this manager
);
}
|
屬性介紹
| 屬性 | 型別 | 預設值 | 介紹 |
|---|---|---|---|
| souce | Object | null | same as the react image format source={{uri:'http...'}} or source={require('./...')} |
| tintColor | string | null | optional tintColor |
| scale | float | null | optional scale amount |
| scaleType | string | null | one of center, centerCrop, centerInside, fitCenter, fitStart, fitEnd, fitXY, matrix |
| onTap | function | null | optional on tap listener |
| onLoad | function | null | optional on load listener |
例項演示
?| 1 2 3 4 5 6 7 8 9 |
import
Image from 'react-native-image-zoom'
<Image
onTap={
()=> {ToastAndroid.show('ON
TAP',ToastAndroid.SHORT)}}
onLoad={
()=> {
ToastAndroid.show('onLoad',ToastAndroid.SHORT)
}}
source={{uri:this.state.text}}>
</Image>
|
相關推薦
React Native開源圖片縮放處理元件
尊重版權,轉載請註明出處 專案介紹 該元件進行封裝了Android平臺PhotoView和Universal-image-loader元件，進行實現影象縮放等功能。不過只是適配Android平臺 剛建立的React Native技術交流3群(496508742)歡迎各位大牛,React Nati
android 開源photoView的使用（單點/多點觸控來進行圖片縮放的智慧控制元件）
簡介PhotoView 是一款擴充套件自Android ImageView，支援通過單點/多點觸控來進行圖片縮放的智慧控制元件。特性：支援單點/多點觸控，即時縮放圖片； 支援平滑滾動； 在滑動父控制元件下能夠執行良好；（例如：ViewPager） 當用戶的觸點改變是可以觸
圖片的縮放處理
gpo ram color format div files blog form body "c:\Program Files\ImageMagick-6.9.9-Q16\identify.exe" -format "%[fx:w]x%[fx:h]" 111.jpg
Thumbnailator圖片處理(圖片縮放，區域裁剪，水印，旋轉，保持比例)
Thumbnailator 是一個優秀的圖片處理的Google開源Java類庫。處理效果遠比Java API的好。從API提供現有的影象檔案和影象物件的類中簡化了處理過程，兩三行程式碼就能夠從現有圖片生
react-native開源元件react-native-wechat學習
import * as WeChat from 'react-native-wechat'; import fs from 'react-native-fs'; var resolveAssetSource = require('resolveAssetSource'); // along with Ima
【Java開源】Thumbnailator輕鬆搞定圖片縮放、旋轉、加水印
概述 Thumbnailator 是一個開源的 Java 專案，它提供了非常簡單的 API 來對圖片進行縮放、旋轉以及加水印的處理。 有多簡單呢？簡單到一行程式碼就可以完成圖片處理。形式如下：Thumbnails.of(new File("path/to/direct
11 款 React Native 開源移動 UI 元件
本文推薦 11 個非常棒的 React Native 開源元件，希望能給移動應用開發者提供幫助。 React Native 是近期 Facebook 基於 MIT 協議開源的原生移動應用開發框架，已經用於 Facebook 的生產環境。React Native 可以使用最近非常流行的 React.js 庫來
移動開發----PhotoView 圖片瀏覽縮放控制元件
PhotoView 圖片瀏覽縮放控制元件 和普通的ImageView一樣的使用方法 如使用過程中有任何bug，意見或建議，可郵件給我 [email protected] 效果圖 注意 由於facebook的Fresco圖片載入元件所加載出來的d
圖片上傳裁剪&等比縮放處理（html5+Canvas）
Capricorncd-image-process Image pre processing for upload (html5 + canvas) 解決圖片上傳前縮放到一定比例自動居中裁剪、
Android中輪播所用到viewPager.PageTransformer 頁面滑動時候處理圖片縮放效果程式碼
class ScalePagerTransformer implements ViewPager.PageTransformer { //最小縮放率 private static final float MIN_SCALE = 0.85f;
React Native 的圖片點選放大效果的元件使用 react-native-zoom-image
import React, {PropTypes, Component} from 'react'; import { View, Text, Image, Modal, Easing, StyleSheet, PanResponder, NativeModules, f
利用 HandlerThread 建立一個後臺工作執行緒( AsyncTask 的缺點)，處理圖片縮放時記憶體溢位問題
HandlerThread 可以幫助建立一個擁有有效 Looper 的後臺執行緒，該 Looper 會關聯一個 Handler，而 Handler 中的 MessageQueue 會處理所有的任務。Android 中最常用的後臺技術之一就是 AsyncTa
C#圖片處理之:圖片縮放和剪裁
應聽眾點播要求，今天說說用C#做圖片的縮放和剪裁，相信很多人會對這部分內容感興趣，畢竟這個操作太實用了。 其實在GDI+中，縮放和剪裁可以看作同一個操作，無非就是原始區域的選擇不同罷了。空口無憑，先看具體演算法可能更好理解。 /// <summary&g
Android Matrix處理ImageView中圖片縮放，平移
1，Matrix 原理簡單介紹 Matrix ：矩陣，線性代數裡有介紹，結合Matrix，用於平面的縮放、平移、旋轉等操作。 首先介紹一下矩陣運算。加法和減法就不用說了，太簡單了，對應位相加就好。影象處理，主要用到的是乘法 。下面是一個乘法的公式： 在 And
jQuery圖片縮放插件-smartZoom使用
下載 地址 height 9.png 鼠標滾輪 html span logs 縮小 e-smart-zoom-jquery.js插件，下載地址及示例：https://github.com/e-smartdev/smartJQueryZoom 插件描述：通過將鼠標懸停在圖片
UWP 圖片縮放
enabled arp highlight nbsp mod 技術分享 com eight 感激 給Image外面包裹一個ScrollViewer，你會回來感激我的。 哦，對了，PC上需要按住Ctrl鍵，滑動鼠標滑輪即可；手機上雙指就可以縮放。 <ScrollV
一個java圖片縮放及質量壓縮方法
exceptio nco dep example codes 圖片 round 調用 java 由於網站需要對上傳的圖片進行寬度判斷縮放和質量壓縮，以提升整體加載速度，於是我在網上找處理方法，網上大多數是谷歌圖片處理組件Thumbnails的介紹。最開始我用Thumbnai
圖片點擊放大，再次點擊回到原來狀態（圖片縮放）
點擊事件 nbsp 尺寸 狀態 調用 ges cnblogs view tps 1.生成一個類，繼承自UIView（ScalePictures），在這個類的.h中聲明一個類方法： +(void)scanBigImageView:(UIImageView *)currentI
React Native開源項目如何運行（轉載）
本地 AR native tao 輸入 original 命令 模仿 targe 學習任何技術，最快捷的方法就是學習完基礎語法，然後模仿開源項目進行學習，React Native也不例外。React Native推出了1年多了， 開源項目太多了，我們以其中一個舉例子.給大家
Python圖片縮放
圖片 nbsp odi readlines ont put pre def spa from PIL import Image def size(jpg,now_size): im = Image.open(jpg) width, height = im