ldn0x7dc / react-native-gallery Goto Github PK

Can I have use some arguments to set the time that confirm the single Tap? I think it's about 700ms and it's too long for me.

放大不在缩小回去怎么操作

First, i want to say that i really love your component. But it has really serious performance issues. I try to fix that with patching your @ldn0x7dc/react-native-view-pager to remove clipped subviews but it didnot work. Do you have any idea about removing unnecessary(hidden) views ?

When the component is sliding from one image to another and you quickly close the modal, and unhandled error is thrown:

undefined is not an object (evaluating '_this.refs['innerListView'].scrollTo')

Actually there're two problems, steps as followed:

1. open gallery page
2. jump to another page to choose a different array of images
3. back to the gallery page but no refreshing the current image, though the initial value and images of the gallery has been changed.
   So the solution may be the gallery component provides a function to refresh?

It would be great if instead of just passing an array of images, it could expose the ListView through this component.

Hello, I just tried the Demo and the images don't seem to be adapting correctly after rotating the device. Happened on both the Simulator and real Device.

As far, I got it done with an APP roughly so it'll be better if the gallery provides features as followed:

1. Image loading progress, please refer this: https://github.com/oblador/react-native-image-progress
2. Support local image that's needed by caching function
3. Provide other view model, like grid view(photo album) or thumbnails preview under big image(same as lightbox)
   Hope you guys have a roadmap or gimme some guides about how-to or shortcuts. TIA!

Hello,

Great component! However, sometimes the first image doesn't show up, I need to scroll to the second image and back to the 1st for it to show up. Or go back and navigate to the Gallery page again for the 1st image to show up.

Tested on iOS only.

Thanks.

I want to add button close on gallery, but it not work at all?
How can i do it?

support the longPress method?
onSingleTapConfirmed --> dismiss
onLongPress --> save

你的RN版本得升级了，现在是react native 49,不升级报错，将React中的PropTypes换成下面的就可以了
import PropTypes from "prop-types";

I tried to set the field "currentPage" of the gallery outside of the component, unfortunately, that's failed.

I'm getting maximum call stack size with the sample code. Any tips?

I'm using:

"react": "16.0.0-alpha.6",
"react-native": "^0.44.3",

"react-native": "^0.31.0", when can support the laste react-native version.

This will be a very nice and useful feature

I'm using react-native-cli: 2.0.1
react-native: 0.40.0

and this project doesn't seem to work on android anymore. anyone else experiencing this?

React Native 0.50 is the first version to ship with support for React 16.0.0.
https://reactjs.org/blog/2017/09/26/react-v16.0.html

PropTypes are missing in React object. Can you import it from prop-types?

和 NavigatorIOS 的手势 滑出的时候会报错，大概判断时当页面推出，容器销毁以后， Scroller 会继续执行，导致了这个错误

错误的相关代码是 this.refs['innerListView'].scrollTo({x: curX, animated: false});

Hey,

Using this gallery.getViewPagerInstance().setPage(page) where page is a number index of an existing position array. after this, the render method with the Gallery component is called, not using initialPage since is not required.
But still, keep on the same page.

The example

class Foo extends React.Component {
    render() {
        return (
            <Gallery
                images={[
                    'http://img.verbapp.me/s3/upload/photos/3/92bcf9ec25366d4e4bcfe81348c6cb56708e0484.jpg'
                ]}
            />
        );
   }
}

Pinch zoom doens't work. The image will zoom on double tap only.
Is this bug or I should setup some props?

onSingleTapConfirmed,onGalleryStateChanged 这两个事件不起作用，好像没有触发

@ldn0x7dc

is there any way to change the scrollbar color (page indicator)? it's always black.

How to stop moving the image when there is only one image also to another direction
for example, I don't want the image to move to the top or to the bottom only to the direction of the next page, if we are in the first page the image should only move to the left to show the next page, in the current way you can move the image to any direction and this looks somehow buggy.

Thanks

I'd like to be able to tell when the gallery is loading images, but not yet displaying them. Is there a way to do this?

First image in gallery displays correctly, clicking on it yields the following, tried older versions, and different images, wrapping it in a View, etc and nothing seems to make a difference. Any ideas?

"react": "^15.2.1",
"react-native": "^0.29.0",
"react-native-gallery": "0.0.15",

render() {
return (
<Gallery
style={{flex: 1, backgroundColor: 'black'}}
images={[
'http://p10.qhimg.com/t019e9cf51692f735be.jpg',
'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg',
'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg'
]}
/>
)
}
}

Hi,

I think it's a desirable feature to be able to render alternative states for each individual image in the gallery, for instance, a "loading" component while the image is still loading (achieved with the onLoad event handler of react native's Image component), or an "error message" component if a load error occurs (Image.onError event handler).

My proposal is to add something like renderLoading and renderError optional props, which are functions that return the content to be shown in the respective cases.

I can volunteer to send a pull request with an implementation for this feature. Just let me know what you think about this.

And thanks a lot for this package!

This component works on react-native 0.28+ and only supports remote images for now.

The readme says only remote images but it seems to work for local iOS simulator images.

Can it be expected to work on local images for iOS and Android?

Should readme be updated?

Hi, I love this library I think its a really great amount of good work, but I would like to more functionality to this module, I would like to be able to get control over the gesture responder, this is because I want to implement a feature of swipe up/down to dismiss the gallery, just like Facebook does.

Please let me know if this conflicts with the plans for this plugin and if not can you point me to the right direction to make this change? for what I see its part of this repo.

Thanks!

以下代码当 initialPage ＝0 的时候，第一张图没有垂直居中，不知道是因为插件本省的bug? 还是因为我把 Gallery 套在了 navigatorIOS下导致的。
不过 如果 initialPage = 1 或者 其他值的时候，预览的图片正确居中。

还能提供一个信息，第一张图没有垂直居中的时候，如果滑动页面，图片的位置会再次渲染跳转到正确的居中位置。

this.initialPage = 0;
this.urls = [url,url];


<Gallery 
        style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.8)'}}
        initialPage={this.initialPage}
        images={this.urls}
        onSingleTapConfirmed={()=>{
          // alert("onSingleTapConfirmed")
          this.navigator.pop()
        }}
     />

＊还有一个问题： Gallery 配合 navigatorIOS 的手势返回会引起一些操作上的冲突，虽然能正常使用，但体验不太好。
比如在触发 navigatorIOS 返回的手势以后，图片还是会捕捉手势做运动，引起两层运动，体检不佳

Gallery will blink when Animated by width and height.

Here is the codeline:
index.ios.js:

  <Lightbox
          origin={this.origins[this.state.selectedIndex]}
          onClose={this._closeLightbox.bind(this)}
          visible={this.state.selectedIndex !== -1}>
          <Gallery
            style={{flex:1, backgroundColor: 'black'}}
            onSingleTapConfirmed={this._closeLightbox.bind(this)}
            initialPage={this.state.selectedIndex}
            images={this.props.images}/>
        </Lightbox>

Lightbox.js

let openStyle = this.props.origin && [styles.open, {
        left: animator.interpolate({inputRange: [0, 1], outputRange: [origin.x, 0]}),
        top: animator.interpolate({inputRange: [0, 1], outputRange: [origin.y, 0]}),
        width: animator.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}),
        height: animator.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}),
      }];

<Animated.View style={openStyle}>
        {this.props.children}
</Animated.View>

PropTypes = undefined
This is my package.json file

"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-gallery": "^0.0.17",
"react-native-git-upgrade": "^0.2.7",
"react-native-maps": "^0.17.0",
"react-native-open-settings": "^1.0.1",
"react-native-photo-view": "^1.5.2",
"react-native-share": "^1.0.23",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.13"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},

PropTypes = not an object of react anymore.

Gallery.js has
import React, { Component, PropTypes } from 'react';
I think it has to be changed to
import PropTypes from 'prop-types';

the component

<Gallery style={{flex: 1, backgroundColor: 'black'}} images={[ 'http://p10.qhimg.com/t019e9cf51692f735be.jpg', 'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg', 'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg', ]} /> </View>

Enviroment

iOS
RN 0.32

Code

/**
 * Zai Qiu Chang App
 * https://www.zaiqiuchang.com/
 */

import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Image from 'react-native-transformable-image';
import Gallery from 'react-native-gallery';

import {COLOR} from '../../config';
import * as components from '../';
import * as helpers from '../helpers';

export default class Album extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    let {sceneKey, setSceneState} = this.props;
    let {imageUris, currentIndex=0} = this.props;
    setSceneState(sceneKey, {imageUris, currentIndex});
  }

  render() {
    let {sceneKey, loading, processing, error, sceneState, setSceneState} = this.props;
    let {hideNavBar, removeImage} = this.props;
    let {imageUris, currentIndex} = sceneState[sceneKey];
    return (
      <components.LayoutFull
        sceneKey={sceneKey}
        loading={loading}
        processing={processing}
        error={error}
        hideStatusBar={hideNavBar}
      >
        <Gallery
          style={styles.gallery}
          images={imageUris.map(value => helpers.imageUri(value, 'huge'))}
          initialPage={currentIndex}
          pageMargin={5}
          onPageSelected={index => setSceneState(sceneKey, {currentIndex: index})}
          onSingleTapConfirmed={() => Actions.refresh({hideNavBar: !hideNavBar})}
          onGalleryStateChanged={(idle) => {
            if (!idle) {
              Actions.refresh({hideNavBar: true});
            }
          }}
        />
      </components.LayoutFull>
    );
  }
}

let {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
  gallery: {
    flex: 1,
    backgroundColor: 'black',
  },
  image: {
    width: width,
    height: height,
  }
});

How to show Indicator?
i found ViewPager can show indicator, but why gallery not?

安卓下这个插件加在modal时，在滚动未完成，按返回或其他操作卸载modal，应用闪退！

undefined is not an object(evaluating 'this.refs['innerListView'].scrollTo')

computeScrollOffset
Scroller.js:203

callTimer
JSTimerExecution.js:97
......

安卓有些机型（红米4）第一张图片出不来，要滑动到第二张，再滑到第一张才出来

It should not scroll on vertical when scroll horizontal.

This could be a fantastic library, just what I need. But there are too many bugs and shortcomings creeping up on me. Of course I can't blame anyone. If I had time and knowledge I would try to fix them myself.

But I'm starting to wonder if this library is abandoned. I'd be happy to submit some issues describing the problems, but I'm not that keen on putting my time into this if the library is abandoned.

I have even tried to email the maintainer offering payment for further development, but I get no answer.

Are there any similar libraries out there?