React Native 图片查看组件的方法
程序员文章站
2022-04-06 15:21:14
react native 图片查看组件:react-native-image-viewer,纯js组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图...
react native 图片查看组件:react-native-image-viewer,纯js组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。
效果图
安装方法
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 页码指示器样式
完整示例
完整代码:https://github.com/forrest23/reactnativecomponents 本次示例代码在 component06文件夹中。
组件地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
-
React组件的生命周期及其方法 博客分类: React React组件生命周期React生命周期API
-
React组件的生命周期及其方法 博客分类: React React组件生命周期React生命周期API
-
react没有嵌套关系的组件之间通信方法详解
-
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
-
React Native自定义标题栏组件的实现方法
-
Android原生项目集成React Native的方法
-
React Native 截屏组件的示例代码
-
react:在一个组件中调用别的组件中的方法
-
react 兄弟组件如何调用对方的方法示例