欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React Native 图片查看组件的方法

程序员文章站 2022-04-06 15:21:14
react native 图片查看组件:react-native-image-viewer,纯js组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图...

react 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>
  );
 }
}

主要参数说明

  1. imageurls 图片url地址的数组
  2. enableimagezoom 是否允许缩放
  3. failimagesource 加载失败时显示的图片
  4. loadingrender 加载loading
  5. renderheader 头部样式
  6. renderfooter 底部样式
  7. renderindicator 页码指示器样式

完整示例

完整代码:https://github.com/forrest23/reactnativecomponents 本次示例代码在 component06文件夹中。

组件地址:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。