React Native 圖片查看組件的方法
更新時間：2018年03月01日 13:49:51 作者：ReactNative開發(fā)圈
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
React Native 圖片查看組件：react-native-image-viewer，純JS組件，小巧快速的圖標(biāo)查看組件。支持圖片放大縮小，支持圖片加載失敗設(shè)置替代圖片，支持將圖片保存到本地等功能。
效果圖
安裝方法
npm i react-native-image-zoom-viewer --save
使用示例
const images = [
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
},
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
},
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
},
];
export default class Component06 extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1 }}>
<ImageViewer
imageUrls={images}
failImageSource={{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
width: Dimensions.get('window').width,
height: Dimensions.get('window').width,
}}
/>
</View>
);
}
}
主要參數(shù)說明
- imageUrls 圖片url地址的數(shù)組
- enableImageZoom 是否允許縮放
- failImageSource 加載失敗時顯示的圖片
- loadingRender 加載loading
- renderHeader 頭部樣式
- renderFooter 底部樣式
- renderIndicator 頁碼指示器樣式
完整示例
完整代碼：https://github.com/forrest23/ReactNativeComponents 本次示例代碼在 Component06文件夾中。
組件地址：https://github.com/ascoders/react-native-image-viewer
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近筆者在開發(fā)個人博客的后臺管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話不多說直接開始吧,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了優(yōu)雅的在React項目中使用Redux的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
React中實現(xiàn)keepalive組件緩存效果的方法詳解
由于react官方并沒有提供緩存組件相關(guān)的api（類似vue中的keepalive），在某些場景，會使得頁面交互性變的很差。所以本文為大家介紹了React中實現(xiàn)keepalive組件緩存效果的方法，希望對大家有所幫助2023-01-01
這篇文章主要介紹了React函數(shù)式組件和類式組件詳情，React是組件化的的JS庫，組件化也是React的核心思想，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解webpack + react + react-router 如何實現(xiàn)懶加載
這篇文章主要介紹了詳解webpack + react + react-router 如何實現(xiàn)懶加載,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-11-11
使用webpack搭建react開發(fā)環(huán)境的方法
本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法，在這篇文章中我們開始利用我們之前所學(xué)搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的Webpack知識。一起跟隨小編過來看看吧2018-05-05
Zustand是一個為React和瀏覽器環(huán)境設(shè)計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持2024-09-09
這篇文章主要介紹了React-組件渲染和更新的實現(xiàn)代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11