ldn0x7dc / react-native-gallery Goto Github PK
View Code? Open in Web Editor NEWA pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.
A pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.
安卓下这个插件加在modal时,在滚动未完成,按返回或其他操作卸载modal,应用闪退!
undefined is not an object(evaluating 'this.refs['innerListView'].scrollTo')
ViewPager.js:61computeScrollOffset
Scroller.js:203
callTimer
JSTimerExecution.js:97
......
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?
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 ?
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
?
你的RN版本得升级了,现在是react native 49,不升级报错,将React中的PropTypes换成下面的就可以了
import PropTypes from "prop-types";
It would be great if instead of just passing an array of images, it could expose the ListView through this component.
How to show Indicator?
i found ViewPager can show indicator, but why gallery not?
"react-native": "^0.31.0", when can support the laste react-native version.
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.
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?
This will be a very nice and useful feature
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'
]}
/>
)
}
}
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.
放大不在缩小回去怎么操作
以下代码当 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 返回的手势以后,图片还是会捕捉手势做运动,引起两层运动,体检不佳
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?
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?
安卓有些机型(红米4)第一张图片出不来,要滑动到第二张,再滑到第一张才出来
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?
support the longPress method?
onSingleTapConfirmed --> dismiss
onLongPress --> save
onSingleTapConfirmed,onGalleryStateChanged 这两个事件不起作用,好像没有触发
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>
As far, I got it done with an APP roughly so it'll be better if the gallery provides features as followed:
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.
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
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';
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!
iOS
RN 0.32
/**
* 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,
}
});
It should not scroll on vertical when scroll horizontal.
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!
I want to add button close on gallery, but it not work at all?
How can i do it?
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')
is there any way to change the scrollbar color (page indicator)? it's always black.
I tried to set the field "currentPage" of the gallery outside of the component, unfortunately, that's failed.
Actually there're two problems, steps as followed:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.