greatbsky / react-native-pull Goto Github PK
View Code? Open in Web Editor NEWPullView & PullList component in React Native both for Android and iOS, pull to refresh, very useful & easily
License: MIT License
PullView & PullList component in React Native both for Android and iOS, pull to refresh, very useful & easily
License: MIT License
滚动的功能无效了。
分页不用说了吧,列表要一页一页加载,还有一个是当滑动到底部多少像素以内的时候触发一个事件,这样可以实现上拉刷新。
上拉下拉已经无效了,好像setNativeProps也改了。。。。。。大神什么时候更新下插件啊?
怎么在load more()中强制关闭上拉出来的加载提示的界面。我想在没有网络情况下直接关闭。
loadMore() {
setTimeout(() => {
this.setState({
refreshing:false,
nomore:true,
});
}, 1000);
}
Hi @greatbsky,
I have an important problems using your solution in my project. Let me try to explain it. I have the following render method:
<View style={styles.container}>
<PullView style={{
width: Dimensions.get('window').width
}}
refreshControl={
<RefreshControl
refreshing = {
this.state.refreshing
}
onRefresh = {
this.onPullRelease.bind(this)
}
/>
}
>
<WebView {...this.props}/>
</PullView>
</View>
The following happens
RefreshControl
is visible and starts loadingIs there a way to tell the PullView to start pulling etc. only when a specific condition is met? Because then I can calculate the scroll position within the Webview, using the onMessage feature to get it and tell the PullView how to act then.
Can you help me out here please?
onShouldSetPanResponder(e, gesture) {
if (!this.pullable || !isVerticalGesture(gesture.dx, gesture.dy)) { //不使用pullable,或非向上 或向下手势不响应
return false;
}
// if (this.props.onPulling || this.props.onPullOk || this.props.onPullRelease) {
// return !this.state.scrollEnabled;
// }
if(gesture.dy < 10){
return false
}
if (!this.state.scrollEnabled) {
this.lastY = this.state.pullPan.y._value;
return true;
} else {
return false;
}
}
很感谢作者的付出
发现了一个问题,使用PullList 当第一次上拉完成的时候 画面会卡在上拉界面完成拖拽的位置 不会回弹到列表底部
而第二次以及以后 就可以了
试过ListView 是没有这个问题的
望解决或者提供解决思路 谢谢~
很感谢作者的付出,我狠想用这个效果。目前使用中有几点疑问:
如果数据没有一屏的话,一进入界面就会出现菊花加载?这个怎么处理?
debug在真机上调试,打开app一段时间,老是自己退出。
iOS上拉加载界面无法回弹问题?iOS这边第一次上拉界面无法回弹.
2.0.1版本
当数据条目很少 并且能够滑动的时候,然后滑动ListView renderRow就会不停被调用
如果是我代码有问题 请指出 谢谢。 我的版本是0.28 安卓环境
` constructor(props){
super(props);
this.state = {
dataSource : new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
}),
}
}
componentDidMount(){
let dataBlob = [];
for (var ii = 0; ii < 4; ii++) {
dataBlob.push('Row ' + ii);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(dataBlob),
});
}
_renderRow(deviceLogInfo, sectionID: number, rowID: number){
return(
<View
style={{backgroundColor: 'red',width: 360,height: 170,marginTop: 30}} />
)
}
render(){
return(
<View style={{flex: 1,backgroundColor: 'white'}}>
<PullList
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
onPullRelease={() =>{}}
/>
)
}`
新版本已经没有listview这个组件了,在您的api里面也没有上拉刷新的属性和方法
没有上拉加载更多的功能吗
看了下源码,希望添加showsVerticalScrollIndicator属性为可配置属性
<ScrollView ref={(c) => {this.scroll = c;}} refreshControl={refreshControl} onScroll={this.onScroll}> {this.props.children} </ScrollView>
react-native-pull 可以同时满足上滑,下拉刷新吗
上拉加载和下拉刷新都没有问题,但是每次滚动到顶部,再次往下滑动时有明显卡顿,但是第二次进行滑动就会恢复顺畅,用demo源码测试也有这个问题,是否是需要预加载的问题?
(真机测试效果,虚拟机没有测试)
ExceptionsManager.js:63 this.refs.listView.scrollTo is not a function
PullView实现下拉刷新页面,但是在向下滑动时想实时获得下滑的距离,也就是ScrollView中的onScroll功能,请问下PullView能实现吗
<PullList style={styles.list} dataSource={this.state.dataSource} renderRow={this._renderRow} renderSectionHeader={this._renderSectionHeader} onPullRelease={this._onRefresh} />
When I use the 'renderSectionHeader' with PullList,It doesn't work.
There is noting,The window is empty.
在项目中用到PullView,但是发现PullView里面的元素采用flex布局的话不生效。我的代码结构如下:
<View style={{ flex: 1 }}> <PullView style={{ flex: 1 }}> <Image style={{ height: 200 }}/> <View style={{ flex: 1 }}>...</View> </PullView> </View>
查看源码之后发现PullView.js的getScrollable方法返回的是一个ScrollView,但是ScrollView上面并没有contentContainerStyle属性,导致flex:1在ScrollView层断了,无法被ScrollView里面的元素继承。
建议:
在PullView上增加一个contentContainerStyle的props;或者默认使用flex:1
如题,多拉拉几次,就能复显了
Pull indicator still appears even RefreshControl is used.
Will try to see and debug this issue
在PullView的前面,给app做了个标题,
安卓版一切正常。
IOS版,即便不下拉,也能看到本来隐藏着的“刷新中"。
如果把app的标题行删除了,就好了(不下拉,就看不到“刷新中")。
而且,ios版上标题的左右边上按钮的操作也受到了影响,
感觉像是PullView蒙在了标题的上层一样,影响了下层的点击。
于是把标题的style zIndex设置的大了点就搞定了。
本人是RN小白,一点经验写来分享,大神不要笑话俺哦。
github地址
只有几个文件,可以用npm安装,也可以直接下载包存到自己的项目文件夹里,用import导入。
基本保持了react-native-pull用法,只有一点修改:
原版的onPullRelease里面要用resolve()隐藏刷新指示器,用起来十分麻烦。我增加了一个isRefreshing属性,用来控制指示器器的显示/隐藏(该属性为true的时候显示指示器,为false的时候隐藏指示器)。
另外PullView存在一个BUG:如果内部包裹了另一个list,那么内部的list将无法正常使用上拉加载更多功能。个人猜测原因是这样的:
我们在做上拉刷新时,要用onEndReachedThreshold判断距离最底部有多远。但是用PullView包裹后,因为PullView本身是一个ScrollView,ScrollView会随内部内容进行自增长,所以ScrollView内部的list永远碰不到底部。
后来我把外部的PullView和内部的FlatList都设定了一个固定高度,上拉加载更多就能正常使用了。不过这样做实在太麻烦,所以我干脆就把它去掉了。
我不想图片和文字那么近。
@react-native 0.39.2
报错信息:
View was rendered with explicitly set width/height but with a 0 flexBasis. ....
请看一下这个是什么问题?
没升级版本之前是没问题的。
如题。
在使用 pullList 时候,发现paddingleft paddingRight属性会影响页面发生严重偏移布局。并且在该属性下IOS页面首次加载listview慢(页面数据是本地的)
在介绍里只出现了下拉相关用法
PullView内有嵌套 一层ListView,
ListView定高,在Android平台下,当ListView内容滑动到第一条时,再继续向下划,无法触发pullView。
大概代码如下,仅限示意:
<PullView style={{width: Dimensions.get('window').width, backgroundColor: '#f1f1f1', }}
onPullRelease={this.onPullRelease}
topIndicatorRender={this.topIndicatorRender}
topIndicatorHeight={44}>
<View style={{flex:1,height: someHeight}} />
<ListView style={{height: someHeigher}}/>
</PullView>
请问是否有解决方案?多谢
rt
react [native新人,使用pullList的时候上面写的返回按钮被遮住了<Top navigator={this.props.navigator}/> <PullList onPullRelease={this.onPullRelease} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} style={styles.list} enableEmptySections = {true}/>
不知道这个应该怎么解决啊
目前直接 npm install react-native-pull@latest --save安装的话会是旧版本的,没有i18n文件夹。
后面下载了项目覆盖才可以。
IOS中有一个属性为scrollEnabled,默认为true【内容是可以滚动的】,根据代码编写的原理,当页面向下滚动的时候【下拉刷新】,scrollEnabled切换为false,由自定义的刷新滚动效果替代自带的滚动效果,这个总体来说没问题,但是在IOS里面,此时向上滑动的时候,scrollEnabled切换为true,但由于状态切换的延迟性,导致一开始滚动效果依然是自定义的,再次向上滑动的时候才会正常,但是滑落到底部之后,会默认切换成false,导致再次向上滑动的时候会出现相同的情况,自定义的向上滚动效果与自带的滚动效果差别较为明显,不知道作者有没有注意到这个问题呀,还是说只有我的有问题?【PullView和PullList都存在这种情况】!
can not set style on component like:
<PullView style={{...}}>
这个问题主要是出现在iOS上,因为iOS的scrollview是有弹性的Android没有,
个人的解决办法是在判断是否拦截上拉事件时返回false,不拦截。这样上拉还是交给scrollview自己处理,希望可以解决问题,如果不能希望对帮助你解决问题提供一个思路。
代码:
onShouldSetPanResponder(e, gesture) {
//向上滑动不拦截 防止上方出现白色部分
if (!this.pullable || isUpGesture(gesture.dx, gesture.dy)|| !isVerticalGesture(gesture.dx, gesture.dy)) { //不使用pullable,或非向上 或向下手势不响应
return false;
}
if (!this.state.scrollEnabled) {
this.lastY = this.state.pullPan.y._value;
return true;
} else {
return false;
}
}
如果发现不能向上滑动可以把scrollview或者listview里面的
scrollEnabled={this.state.scrollEnabled}这个代码去掉。
目前我用着至少比以前好了。
因为loadMore的触发机制是滚动条滚到底部,如果loadMore方法不是异步倒是没有问题(如您demo),但是如果是异步的,就会触发多次,因为一开始触发,接口那边数据并没很快返回,紧接着会触发第二次。请问这种问题,该怎么解决呢
版本:"react-native-pull": "latest",
`
async onPullRelease(resolve){
let that=this;
await that.getWeather(that.state.localCity);
console.log('刷新');
resolve();
}
topIndicatorRender=(pulling, pullok, pullrelease)=> {
const hide = {position: 'absolute', left: 10000};
const show = {position: 'relative', left: 0};
setTimeout(() => {
if (pulling) {
this.txtPulling && this.txtPulling.setNativeProps({style: show});
this.txtPullok && this.txtPullok.setNativeProps({style: hide});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
} else if (pullok) {
this.txtPulling && this.txtPulling.setNativeProps({style: hide});
this.txtPullok && this.txtPullok.setNativeProps({style: show});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
} else if (pullrelease) {
this.txtPulling && this.txtPulling.setNativeProps({style: hide});
this.txtPullok && this.txtPullok.setNativeProps({style: hide});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
}
}, 1);
return (
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
<ActivityIndicator size="small" color="white" />
<Text style={{color:'white'}} ref={(c) => {this.txtPulling = c;}}>下拉刷新</Text>
<Text style={{color:'white'}} ref={(c) => {this.txtPullok = c;}}>松开刷新</Text>
<Text style={{color:'white'}} ref={(c) => {this.txtPullrelease = c;}}>刷新中</Text>
</View>
);
}
<PullView style={{width: Dimensions.get('window').width}} onPullRelease={this.onPullRelease}
topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}>
`
下拉的时候显示“下拉刷新”,
下拉到一定高度的时候显示“松开刷新”
可是松开的时候没有显示“刷新中”,而是直接隐藏刷新条
onPullRelease里的getWeather是请求
请问一下哪里出问题了?
pulllist 完成数据加载 下拉刷新的header 不收回?
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.