React Native如何实现图片查看组件
Mar 03, 2018 am 09:22 AMReact Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。本文主要和大家介绍了React Native 图片查看组件的方法,希望能帮助到大家。
效果图
安装方法
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> ); } }
主要参数说明
imageUrls 图片url地址的数组
enableImageZoom 是否允许缩放
failImageSource 加载失败时显示的图片
loadingRender 加载loading
renderHeader 头部样式
renderFooter 底部样式
renderIndicator 页码指示器样式
相关推荐:
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解_javascript技巧
Atas ialah kandungan terperinci React Native如何实现图片查看组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?

Bagaimana untuk menyiarkan gambar dalam ulasan TikTok? Di manakah pintu masuk ke gambar di ruang komen?

6 Cara Menjadikan Gambar Lebih Tajam pada iPhone

Cara membuat gambar ppt muncul satu persatu

Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader - Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi seret dan zum imej?

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan penggabungan dan paparan imej

Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
