react-native-kpframework-gallery

图片浏览器，支持左右滑动，手势缩放，双击缩放，网络图片下载缓存并显示，本地图片显示。支持超大图片的浏览。

兼容

version 0.4.x requires react-native >= 0.61.0 androidx version 0.3.x requires react-native >= 0.56.0

原生库

• Android
  基于subsampling-scale-image-view修改
• iOS
  基于YBImageBrowser修改

安装方式

第一步: 添加库

yarn add react-native-kpframework-gallery

第二步: 链接原生

react-native link react-native-kpframework-gallery

第三步

android
Gradle >= 3.1.4 (android/build.gradle)
Android SDK >= 26 (android/app/build.gradle)

iOS

1. Cocoapods(推荐)
   修改 Podfile 文件，如下:

platform :ios, '9.0'

target '<project_name>' do
  # this is very important to have!
  rn_path = '../node_modules/react-native'
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'KPNativeGallery', :path => '../node_modules/react-native-kpframework-gallery'
end

# very important to have, unless you removed React dependencies for Libraries
# and you rely on Cocoapods to manage it
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

执行 pod install

2. 手动安装
   Click on project General tab
   Under Deployment Info set Deployment Target to 8.0
   Under Embedded Binaries click + and add KPGallery.framework

使用

import KPGallery from 'react-native-kpframework-gallery';
...

const images = [
    {
        source: require('./test00.png'),
    },
    {
        source: {
            uri:
                'http://m.qpic.cn/psu?/43967169/Y.YMon9Po5EyLcZVxakkQnZn0y.O5dEjvtvA0bKXv9A!/b/YfBXWBFokwAAYrBHfRI4VAAA&a=29&b=31&bo=ngKEAQAAAAABEC4!&rf=viewer_4',
        },
    },
    {
        source: {
            uri:
                'http://m.qpic.cn/psu?/43967169/.P4OPC7dpQi5WtD7AJjRMloPZJIM4w.5wSJ7wCiLFjM!/b/Yf.ZShHKVAAAYsfQfhK4VAAA&a=29&b=31&bo=AAKOAQAAAAABELo!&rf=viewer_4',
        },
    },
    {
        source: require('./test11.jpg'),
    },
];

KPGallery.showGallery({ images },
    index => console.log('callback', index),
    () => console.log('callback', 'close')
);

API

• showGallery(options, onPageChanged, onClose);

1. options 参数说明

| 属性 | 说明 | 类型 | 默认值 | | ----------- | ------------------------------------- | ------ | ------------------ | | images | 图片数据数组，见下面的image说明 | array | 无 | | index | 初始显示第几张 | number | 0 | | debug | 是否开启 debug 模式,仅 android 端有效 | bool | false | | minScale | 最小缩放比例，mode为custom时有效 | number | 0.5 / iOS 固定为 1 | | maxScale | 最大缩放比例，mode为custom时有效 | number | 2 | | mode | 图片显示模式inside crop custom,对gif图片无效。目前gif图片不支持缩放功能 | string | insde | | orientation | 横竖屏auto portrait landscape | string | auto | | seek | 是否显示可拖动的进度条 | bool | false |

image 单个图片属性(仅支持android)

| 属性 | 说明 | 类型 | 默认值 | | -------- | ------------------------------------- | ------ | ------ | | source | 与 react-native 的 Image source 一致 | | 无 | | debug | 是否开启 debug 模式,仅 android 端有效 | bool | false | | minScale | 最小缩放比例，mode为custom时有效 | number | 0.5 | | maxScale | 最大缩放比例，mode为custom时有效 | number | 2 | | mode | 图片显示模式inside crop custom | string | insde |

2. onPageChanged

图片切换时调用

index => {};

3. onClose

gallery 关闭时调用

() => {};

4. 其他说明

mode

inside缩放图片至全部显示；
crop缩放图片宽度至屏幕宽度，如果图片比屏幕窄，则有多宽显示多宽；
custom指定了该模式，则需要提供minScale和maxScale，图片初始缩放比例为minScale

orientation

iOS 端必须在 AppDelegate.m 中指定支持的横竖屏模式

// portrait - UIInterfaceOrientationMaskPortrait
// landscape - UIInterfaceOrientationMaskLandscape
// auto - UIInterfaceOrientationMaskAllButUpsideDown
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
  return UIInterfaceOrientationMaskLandscape;
}

5. 注意事项

• iOS 单个 image 仅支持设置source

• iOS 不支持minScale，固定为 1

• iOS 不支持debug调试模式

6. KPAndroidGalleryView

在RN中，android端直接打开activity，有时会出现不可预料的task切换的问题； 如果无法直接使用startActivity的方式切换界面，那可以直接使用该组件在界面上绘制；

• options onPageChanged onClose
  与前面使用方式一致
• orientation
  无效
• onClosePress
  新增点击关闭事件

import { KPAndroidGalleryView } from "react-native-kpframework-gallery";

<KPAndroidGalleryView
  style={{ flex: 1 }}
  options={{
    images,
    debug: true,
    mode: "crop",
    orientation: "auto", // orientation无效
    seek: true
  }}
  onPageChanged={index => console.log("onPageChanged:" + index)}
  onClosePress={() => console.log('点击关闭按钮')}
  onClose={() => console.log('组件销毁')}
/>;