欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Native 圖片查看組件的方法

 更新時(shí)間：2018年03月01日 13:49:51   作者：ReactNative開(kāi)發(fā)圈  
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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ù)說(shuō)明

  1. imageUrls 圖片url地址的數(shù)組
  2. enableImageZoom 是否允許縮放
  3. failImageSource 加載失敗時(shí)顯示的圖片
  4. loadingRender 加載loading
  5. renderHeader 頭部樣式
  6. renderFooter 底部樣式
  7. renderIndicator 頁(yè)碼指示器樣式

完整示例

完整代碼：https://github.com/forrest23/ReactNativeComponents 本次示例代碼在 Component06文件夾中。

組件地址：https://github.com/ascoders/react-native-image-viewer

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • React + Node.js實(shí)現(xiàn)圖片上傳功能

    React + Node.js實(shí)現(xiàn)圖片上傳功能

    最近筆者在開(kāi)發(fā)個(gè)人博客的后臺(tái)管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話不多說(shuō)直接開(kāi)始吧,感興趣的朋友可以參考下
    2024-01-01
  • 優(yōu)雅的在React項(xiàng)目中使用Redux的方法

    優(yōu)雅的在React項(xiàng)目中使用Redux的方法

    這篇文章主要介紹了優(yōu)雅的在React項(xiàng)目中使用Redux的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • React中實(shí)現(xiàn)keepalive組件緩存效果的方法詳解

    React中實(shí)現(xiàn)keepalive組件緩存效果的方法詳解

    由于react官方并沒(méi)有提供緩存組件相關(guān)的api（類似vue中的keepalive），在某些場(chǎng)景，會(huì)使得頁(yè)面交互性變的很差。所以本文為大家介紹了React中實(shí)現(xiàn)keepalive組件緩存效果的方法，希望對(duì)大家有所幫助
    2023-01-01
  • React?函數(shù)式組件和類式組件詳情

    React?函數(shù)式組件和類式組件詳情

    這篇文章主要介紹了React函數(shù)式組件和類式組件詳情，React是組件化的的JS庫(kù)，組件化也是React的核心思想，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
    2022-08-08
  • react中關(guān)于Context/Provider/Consumer傳參的使用

    react中關(guān)于Context/Provider/Consumer傳參的使用

    這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 詳解webpack + react + react-router 如何實(shí)現(xiàn)懶加載

    詳解webpack + react + react-router 如何實(shí)現(xiàn)懶加載

    這篇文章主要介紹了詳解webpack + react + react-router 如何實(shí)現(xiàn)懶加載,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2017-11-11
  • 使用webpack搭建react開(kāi)發(fā)環(huán)境的方法

    使用webpack搭建react開(kāi)發(fā)環(huán)境的方法

    本篇文章主要介紹了使用webpack搭建react開(kāi)發(fā)環(huán)境的方法，在這篇文章中我們開(kāi)始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的React開(kāi)發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的Webpack知識(shí)。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • React Zustand狀態(tài)管理庫(kù)的使用詳解

    React Zustand狀態(tài)管理庫(kù)的使用詳解

    Zustand是一個(gè)為React和瀏覽器環(huán)境設(shè)計(jì)的輕量級(jí)狀態(tài)管理庫(kù),由Vercel開(kāi)發(fā),它特點(diǎn)包括輕量級(jí)、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項(xiàng)目,Zustand還支持TypeScript,提供類型安全的支持
    2024-09-09
  • React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • React手寫(xiě)tab切換問(wèn)題

    React手寫(xiě)tab切換問(wèn)題

    今天介紹下React手寫(xiě)tab切換問(wèn)題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧
    2021-11-11

最新評(píng)論