React Native 圖片查看組件的方法
更新時間：2018年03月01日 13:49:51 作者：ReactNative開發(fā)圈
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
React Native 圖片查看組件：react-native-image-viewer，純JS組件，小巧快速的圖標查看組件。支持圖片放大縮小，支持圖片加載失敗設(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)文章
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認prop、設(shè)置初始state、自動綁定，文中分別給出了詳細的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要為大家詳細介紹了React?Hook實現(xiàn)對話框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React?Server?Component混合式渲染問題詳解
React?官方對?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了React表中顯示JSON數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React中useEffect是一個非常重要的Hook,它允許我們函數(shù)組件中執(zhí)行副作用操作,本文就來介紹一下useEffect Hook作用,具有一定的參考價值,感興趣的可以了解一下2024-11-11
在?React?開發(fā)中,props?是組件間通信的重要方式,通過?props,父組件可以向子組件傳遞數(shù)據(jù)和回調(diào)函數(shù),然而,如果對?props?的驗證不足,可能會導(dǎo)致類型錯誤、運行時錯誤或難以調(diào)試的問題,本文將探討?React?中?props?驗證不足的常見問題,并提供解決方案2025-03-03
React使用react-sortable-hoc如何實現(xiàn)拖拽效果
這篇文章主要介紹了React使用react-sortable-hoc如何實現(xiàn)拖拽效果問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
利用React Router4實現(xiàn)的服務(wù)端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實現(xiàn)的服務(wù)端直出渲染(SSR)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01