Coder Social home page Coder Social logo

react-native-pull's People

Contributors

ahcjsdbkjfs avatar code-artisan avatar greatbsky avatar jiasm avatar masterliuwei avatar muscipular avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-pull's Issues

性能有待优化

分页不用说了吧,列表要一页一页加载,还有一个是当滑动到底部多少像素以内的时候触发一个事件,这样可以实现上拉刷新。

loadMore怎么强制关闭。刷新界面

怎么在load more()中强制关闭上拉出来的加载提示的界面。我想在没有网络情况下直接关闭。

loadMore() {
    setTimeout(() => {
        this.setState({
            refreshing:false,
            nomore:true,
        });
    }, 1000);
}
(

{rowData.title} ) } onPullRelease={this.onPullRelease} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={30} onEndReached={this.loadMore} onEndReachedThreshold={50} renderFooter={this.renderFooter} />

PullView always triggered when user wants to scroll to the top in WebView

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

  • when I scroll down, the RefreshControl is visible and starts loading
  • when I scroll up it does not appear
  • but, the user cannot scroll to the top of the Webview again without triggering the PullView again. Only when I scroll twice I am able to get to the top of the Webpage again.

Is 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?

部分手机点击内部元素时会触发成pulling事件,建议添加一个距离判断来

image
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;
}
}

第一次进入push的时候,不回弹

很感谢作者的付出
发现了一个问题,使用PullList 当第一次上拉完成的时候 画面会卡在上拉界面完成拖拽的位置 不会回弹到列表底部
而第二次以及以后 就可以了

试过ListView 是没有这个问题的

望解决或者提供解决思路 谢谢~

使用中遇到的几点建议和问题。

很感谢作者的付出,我狠想用这个效果。目前使用中有几点疑问:

  1. 界面正在刷新的过程中,用户继续(上/下)拉的时候,界面的顶部立即回到初始状态了。(此处是否合应该重新计算,模拟用户的上/下拉回到初始状态)
  2. 界面正在刷新的过程中,用户继续(上/下)达到顶部的时候,假设此时Indicator还在loading和数据正在async中,用户如再次下拉,此时的Indicator不见了,应该是还在刷新中?
  3. 都是参照qq的刷新效果来看的,说的不对请见谅

不知道为什么 滑动的时候ListView不停在重绘

当数据条目很少 并且能够滑动的时候,然后滑动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={() =>{}}
/>

)
}`

PullView希望支持隐藏滚动条

看了下源码,希望添加showsVerticalScrollIndicator属性为可配置属性
<ScrollView ref={(c) => {this.scroll = c;}} refreshControl={refreshControl} onScroll={this.onScroll}> {this.props.children} </ScrollView>

Pulllist顶部往下滚动有卡顿现象,

上拉加载和下拉刷新都没有问题,但是每次滚动到顶部,再次往下滑动时有明显卡顿,但是第二次进行滑动就会恢复顺畅,用demo源码测试也有这个问题,是否是需要预加载的问题?
(真机测试效果,虚拟机没有测试)

How to make a sectionHeader with pull?

<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中flex失效问题;

在项目中用到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

IOS版,即便不下拉,也能看到本来隐藏着的“刷新中"

在PullView的前面,给app做了个标题,
安卓版一切正常。
IOS版,即便不下拉,也能看到本来隐藏着的“刷新中"。

如果把app的标题行删除了,就好了(不下拉,就看不到“刷新中")。

而且,ios版上标题的左右边上按钮的操作也受到了影响,
感觉像是PullView蒙在了标题的上层一样,影响了下层的点击。
于是把标题的style zIndex设置的大了点就搞定了。

本人是RN小白,一点经验写来分享,大神不要笑话俺哦。

我把PullList的底层ListView换成了FlatList,遇到BUG的不妨试试这个

github地址
只有几个文件,可以用npm安装,也可以直接下载包存到自己的项目文件夹里,用import导入。

基本保持了react-native-pull用法,只有一点修改:
原版的onPullRelease里面要用resolve()隐藏刷新指示器,用起来十分麻烦。我增加了一个isRefreshing属性,用来控制指示器器的显示/隐藏(该属性为true的时候显示指示器,为false的时候隐藏指示器)。

另外PullView存在一个BUG:如果内部包裹了另一个list,那么内部的list将无法正常使用上拉加载更多功能。个人猜测原因是这样的:
我们在做上拉刷新时,要用onEndReachedThreshold判断距离最底部有多远。但是用PullView包裹后,因为PullView本身是一个ScrollView,ScrollView会随内部内容进行自增长,所以ScrollView内部的list永远碰不到底部。
后来我把外部的PullView和内部的FlatList都设定了一个固定高度,上拉加载更多就能正常使用了。不过这样做实在太麻烦,所以我干脆就把它去掉了。

使用PullView报错

@react-native 0.39.2

报错信息:
View was rendered with explicitly set width/height but with a 0 flexBasis. ....

请看一下这个是什么问题?
没升级版本之前是没问题的。

pullview里面嵌套了一层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>

请问是否有解决方案?多谢

用pullList遮住了前面相邻的组件

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}/> 不知道这个应该怎么解决啊

IOS内容滚动效果不自然【向上滚动】

IOS中有一个属性为scrollEnabled,默认为true【内容是可以滚动的】,根据代码编写的原理,当页面向下滚动的时候【下拉刷新】,scrollEnabled切换为false,由自定义的刷新滚动效果替代自带的滚动效果,这个总体来说没问题,但是在IOS里面,此时向上滑动的时候,scrollEnabled切换为true,但由于状态切换的延迟性,导致一开始滚动效果依然是自定义的,再次向上滑动的时候才会正常,但是滑落到底部之后,会默认切换成false,导致再次向上滑动的时候会出现相同的情况,自定义的向上滚动效果与自带的滚动效果差别较为明显,不知道作者有没有注意到这个问题呀,还是说只有我的有问题?【PullView和PullList都存在这种情况】!

PullView&&PullList解决下拉顶部偶尔出现空白

这个问题主要是出现在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),但是如果是异步的,就会触发多次,因为一开始触发,接口那边数据并没很快返回,紧接着会触发第二次。请问这种问题,该怎么解决呢

请问一下pullrelease状态不显示是什么问题

版本:"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是请求
请问一下哪里出问题了?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.