zbtang / react-native-viewpager Goto Github PK
View Code? Open in Web Editor NEWViewPager and Indicator component for react-native on both android and ios.
ViewPager and Indicator component for react-native on both android and ios.
Hi I want to prevent vertical drag for pagerdotindicator. I am not sure where I can make that edit. Also there is some white space because of the indicator view pager. How can I remove that space?
Viewpager should have have a pull to refresh view like refresh control
is there any schedule for this feature?
下载了demo, 没有提供循环切换的功能,请问这个可以实现吗
Is it possible to get the current displayed page ?
viewpager 属性中有个 pageMargin: 0,我怎么把这个取出来另外在给它设值。
我在首页中是实用妈个 pageMargin:0,但是我在使用position TitileIndicatior位置后,把view pager给遮住了TitileIndicatior高度的一半,我是使用 view pager中的pageMargin来调整还是有什么其他的办法。
When I'm trying to add TouchableHighlight on the any page of the ViewPager it doesn't render on the screen.
I'm using an IndicatorViewPager and I would like to allow the user to zoom on images. Is this possible?
Hello,
Do you plan to add support for "clicking on dots" for the swipe using dot indicators?
Thanks.
你好, 页面可以显示,但是IndicatorViewPager不能切换页面,手势滑动没效果。不知有没有办法解决,谢谢。
Hi,
When I add many options to the PagerTitleIndicator, this one does not fit and it does not scroll the options.
Thanks for sharing this component! Right now setting flex:1 on the ViewPager doesn't make it fill the screen, seems like it needs a specific number. Would be great if it could handle that.
nest ViewPager into ListView header,if scroll viewpager to anywhere will not auto play
for ex : there 4 tabs for ViewPager, if swipe while opening Drawer , position-values is changed, how does fix one? It seems that swiping(open Drawer) change position of Tabs in ViewPager
The included demo project does not work on Android as checked out from the repo.
It has a dependency on react-native-device-info
which is not included. This is likely to trip up beginners who want to see the demo working in order to track down issues.
I had to follow instructions on https://github.com/rebeccahughes/react-native-device-info to download, install and link the project before the demo runs.
你好, 使用组件会报如下这样的错误,不知道要如何解决。 react native 是 0.25, 谢谢。
transformed 543/544 (100%)[node-haste] Encountered an error while persisting cache:
SyntaxError: D:/test/index.js: Unexpected token (121:6)
119 | _renderDotIndicator()
120 | {121 | return (
| ^
122 | <PagerDotIndicator
123 | pageCount={3}
124 | />
Can I pass a method to be notified when the selected slide changes?
The fix is not working. I am using this as a ListView Header and have set the removeClippedSubviews prop to false, but the pager still not showing. only the dotindicator is showing.
Using IndicatorViewPager
If you scroll through before the page completely stops,
onPageSelected
callback never gets fired.
On Android, this works as intended, where even if you scroll through fast no indexes are missed.
For instance, if you log the indexes in iOS it may show up as
1, 2, 5 where index 3 and 4 were scrolled before fully stopped.
versions:
"react": "15.4.2",
"react-native": "0.41.2",
"rn-viewpager": "^1.1.4",
How can I move the tabs to the top?
They appear in the bottom
Is there any way to style the titles of the tabs? Changing active and inactive font color?
<ListView
renderHeader = {this.starter}
dataSource={this.state.dataSource2}
...etc
/>
...
starter()
{
return (
<View style = {{flex: 1}}>
<ProfileCard/>
<IndicatorViewPager style={{height: height/2.75}}>
<View>
<TelcoMainCard/>
</View>
<View>
<TelcoPlanSingle/>
</View>
<View>
<ServicesCardMain/>
</View>
<View>
<MyDeviceCard/>
</View>
</IndicatorViewPager>
</View>
);
},
This is some of the extracted code from one of my files.
(1) The IndicatorViewPager shows nothing until i change the size of another component at runtime (there is a button on the screen that changes a box's height, in the listview. The button and the box are not within IndicatorViewPager).
(2)Also, if i scroll down too much in the listView's rendered items and then come up to the IndicatorViewPager, it stops acting like View Pager and works like a normal ScrollView, until i click that button again.
More info: The box's size changes by changing the height of another view using the state.
e.g.
height: this.state.boxHeight
and then i change the height using setState.
The box is ProfileCard in the code i pasted above.
Hi guys when i set autplayenable true, when the dots in the last page, and it goes back to first dot seems the view inside of the dots is like reversing back not doing it like infinite loop.
how can i make it like infinite loop ? Both for slide manually and autoplay the slider.. so when goes to last page when i swipe it to right it goes to first dot, same as autoplay enable..
Hi i was wondering if you could help describe how the hooking up to the swipe events works?
Im quite confused about it.
i am using this library and its working fine but the only problem is its gets slow on every slide at the end before the data holds the screen its the slower.
"You can call pager. setPage(selectedPageIndex) or pager.setPageWithoutAnimation(selectedPageIndex)" This is not working. I got this error: "undefined is not an object (evaluating 'this.viewPager.setPage')" .
This is the code:
`import React, { Component } from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
import { IndicatorViewPager } from 'rn-viewpager';
import { IntroOne, IntroTwo } from '@scenes/shared/Intros';
// Styles
import Styles from './styles';
export default class IntroPager extends Component {
constructor () {
super();
this.state = {page : 0};
}
render () {
return (
<IndicatorViewPager ref={viewPager => { this.viewPager = viewPager; }} style={Styles.IndicatorViewPagerStyle}>
);
}
updatePage (myPage) {
this.refs.viewPager.setPage(myPage);
}
}`
怎么样可以禁止滑动翻页,但又不影响点击上面的title 翻页
render() {
return (
<Animated.View style={{flex: 1}}>
<IndicatorViewPager
style={{flex: 1}}
indicator={this._renderTabIndicator()}
onPageScroll={this._onPageScroll.bind(this)}
initialPage={0}
>
<View>
<IndicatorViewPager
style={{flex: 1}}
indicator={this._renderIndicator()}
onPageScroll={this._onNormalPageScroll.bind(this)}
>
<View>
<Text>page 1</Text>
</View>
<View>
<Text>page 2</Text>
</View>
<View>
<Text>page 3</Text>
</View>
<View>
<Text>page 4</Text>
</View>
</IndicatorViewPager>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</Animated.View>
);
}
外层为tab,内层为nod,内层不用View包裹时,
滑动时,底部的position不对,第一个ViewPager中的小圆点不显示;
如果用View包裹里面的IndicatorViewPager后,里面的viewpager中内容无法显示,只显示4个小圆点。
There is already a much more popular package with this name:
https://www.npmjs.com/package/react-native-viewpager
However, it doesn't use native controls under the hood. Perhaps you should consider renaming to something like
react-native-viewpager-native
how can i use viewpager in viewpager,just like childviewpager in android
Using IndicatorViewPager
in iOS
onPageSelected
callback is firing twice every page view.
versions
"rn-viewpager": "^1.1.4",
"react": "15.4.2",
"react-native": "0.41.2",
Currently it supports only Image as icon style in PageTabIndicator
Please add support for custom iconStyle
as Icon
instead of only Image
. It will be flexible if prop type of iconStyle is View.
Is there a way to set the current page?
then i delete ViewPager.js->_renderOnIOS() -> decelerationRate: 'fast', it runs OK.
my react native version is 0.19.0
when i use it in a common webview rn-viewpager work, but i use a tabView from the lib of ' react-native navigation', the tabView have four children View , in the first View i use rn-viewpager and it work in imitator, but it did't work when i reload the project at once
I was investigating using this pager as a wizard. As such I dont want the user to be able to manually swipe to the next page until all the information is complete. Is there a way in which I can disable scroll?
Looking at the code it seems like its always enabled and no way to disable.
Thanks
Hi!
Is it possible to programmatically change the page.
I want to change the page when a button is pressed.
Thanks in advance.
i have image. when my screen on landscape, screen can not scroll. while adding image becomes wide.
this is my code
const { width, height } = Dimensions.get('window')
const styles = {
image: {
width:null,
alignSelf: 'stretch',
flex: 1
}
}
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
export default class ViewPagerPage extends Component {
render() {
var _scrollView: ScrollView;
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1}}
indicator={this._renderDotIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue', flex:1}}>
<ScrollView
pagingEnabled = {true}
>
<Image style={styles.image} source={require('./img/2.jpg')} /> // **<-- this is my question**
</ScrollView>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderDotIndicator() {
return <PagerDotIndicator pageCount={3} />;
}
}
Hi, i realy liked this ViewPager, but i need to add autoplay feature here. Is it possible, can you write some code example for autoplay? Thanks!
this is not available for ios when use react-navigation as routes,when use goBack(),it will flash out,so what should i do
Hi,
if you are using an IndicatorViewPager in combination with a navigator (in my case react-native-navigation), the ViewPager loses the scroll anchors. To be more specific: lets say the view pager is our root view. When you now push a view on the navigator and pop it again, the view pager is scrolling contiously. This only occurs on android.
Does anyone have an idea here?
Regards,
Malte
Swiping the pages manually (for example in the demo app, but also in my own projects) results in the error:
Cannot read property 'onPageSelected' of undefined
Object._onPageSelectedOnAndroid [as onPageSelected]
...ViewPager.js:72:23
ViewPagerAndroid._this_.onPageSelected
...ViewPagerAndroid.android.js:201:17
Otherwise the demo code works great with the automatic scrolling, the tab switching and the bottom tab bar. It is just the manual swiping which does not work.
I have tried to pass onPageSelected()
function into props but was unable to get that working.
Assuming this was the original reason to create this package, it looks like pagingEnabled/horizontal is supported in Android now
<ScrollView pagingEnabled={true}>
Is the main reason to use this library for paging controls? Why use ViewPagerAndroid at all? That would be a helpful addition to the docs.
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.