Natural Preference for Minification

    react-native-kpframework-gallery

    0.4.11 • Public • Published

    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

    原生库

    安装方式

    第一步: 添加库

    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

    1. 手动安装
      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 最小缩放比例,modecustom时有效 number 0.5 / iOS 固定为 1
    maxScale 最大缩放比例,modecustom时有效 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 最小缩放比例,modecustom时有效 number 0.5
    maxScale 最大缩放比例,modecustom时有效 number 2
    mode 图片显示模式inside crop custom string insde

    2. onPageChanged

    图片切换时调用

    index => {};

    3. onClose

    gallery 关闭时调用

    () => {};

    4. 其他说明

    mode

    inside缩放图片至全部显示;
    crop缩放图片宽度至屏幕宽度,如果图片比屏幕窄,则有多宽显示多宽;
    custom指定了该模式,则需要提供minScalemaxScale,图片初始缩放比例为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('组件销毁')}
    />;

    Install

    npm i react-native-kpframework-gallery

    DownloadsWeekly Downloads

    5

    Version

    0.4.11

    License

    MIT

    Unpacked Size

    5.08 MB

    Total Files

    141

    Last publish

    Collaborators

    • xuwaer