精华内容
下载资源
问答
  • 提供react-native下拉刷新和下拉加载组件,简单好用,支持自定义
  • 使用RefreshControl实现下拉刷新,这一组件可以用在 ScrollView 或 FlatList 内部,为其添加下拉刷新的功能。 import React from 'react'; import { ScrollView, RefreshControl } from 'react-native' export ...

    使用RefreshControl实现下拉刷新,这一组件可以用在 ScrollView 或 FlatList 内部,为其添加下拉刷新的功能。

    import React from 'react';
    import { ScrollView, RefreshControl } from 'react-native'
    
    export default class Component extends React.Component {
        state = {
            refreshing: false
    	}
    
        // 在这里刷新页面
        onRefresh = () => {
            this.setState({ refreshing: true });
            this.props.pageFreshen()
                .then(() => {
                    this.setState({ refreshing: false });
                });
    	}
    
        render() {
            return (
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            // 是否正在刷新
                            refreshing={this.state.refreshing}
                            // 刷新函数
                            onRefresh={this.onRefresh}
                        />
                    }
                >
                    {
                        this.props.children
                    }
                </ScrollView>
            )
        }
    }
    
    展开全文
  • React Native 下拉刷新添加自定义动画

    千次阅读 2017-02-16 09:26:11
    在上一章中React Native 之自定义下拉刷新中,已经完成了对React Native中封装与使用下拉刷新,但在实际项目中,经常需要在下拉刷新中添加各种动画效果. http://www.jianshu.com/p/47ffaec2433a 如下: ...

    在上一章中React Native 之自定义下拉刷新中,已经完成了对React Native中封装与使用下拉刷新,但在实际项目中,经常需要在下拉刷新中添加各种动画效果.

    http://www.jianshu.com/p/47ffaec2433a

    如下:


    当用户往下拉时,鸡蛋的蛋壳 会往上移动;触发刷新时,播放一段鸡蛋摇晃的动画效果;当刷新完毕时,鸡蛋从上往下掉,最后盖住鸡蛋壳.

    实现原理:
    在React Native中要使用该效果,光靠js 可能是不够的,光是播放 帧动画,React Native也没有实现该效果的控件. 所以最简单的办法 是将鸡蛋与蛋壳的逻辑都放入原生代码中实现, React Native端告诉原生代码移动的距离与状态.

    关键代码:

    封装View ,使用UIManager.dispatchViewManagerCommand调用View的方法.

    var React = require('React');
    var ReactNative = require('ReactNative');
    var requireNativeComponent = require('requireNativeComponent');
    
    var UIManager = require('UIManager');
    import {
        View,
    } from 'react-native';
    
    const PK_REF_KEY="pk_ref_key";
    
    var PluImageLayout =React.createClass({
    
        propTypes: {
            ...View.propTypes,
        },
        /**调用蛋壳向上移动的原生方法*/
        shellUpward:function(distance){
            UIManager.dispatchViewManagerCommand(
                this.getPluImageHandle(),
                1,
                [distance]
            );
        },
        /**调用鸡蛋摇动帧动画的原生方法*/
        loadingAnim:function () {
            UIManager.dispatchViewManagerCommand(
                this.getPluImageHandle(),
                2,
                null
            );
        },
        /**调用恢复蛋壳位置的原生方法*/
        resetShell:function (distance,maxLength,maxTime) {
            UIManager.dispatchViewManagerCommand(
                this.getPluImageHandle(),
                3,
                [distance,maxLength,maxTime]
            );
        },
    
        render:function () {
            return (
                <RCTPluImageLayout
                    style={{width:38,height:70,marginRight:10,marginTop:-20}}
                    ref={PK_REF_KEY}
                >
                </RCTPluImageLayout>
            );
        },
        /**找到控件的节点*/
        getPluImageHandle: function() {
            return ReactNative.findNodeHandle(this.refs[PK_REF_KEY]);
        },
    });
    
    var RCTPluImageLayout = requireNativeComponent('AndroidPluImageLayout', PluImageLayout);
    
    module.exports = PluImageLayout;

    在React Native的touchMove事件中使蛋壳移动

            if (lastMoveY===0){
                lastMoveY=gestureState.y0;
            }
            //到了一定长度后,让蛋壳上升
            //  >90 只有移动到了视野可见范围才开始移动蛋壳
            if (gestureState.dy>90){
                //移动的距离
                let distance=gestureState.moveY-lastMoveY;
                //计算总共的移动距离
                hasMovedDistance+=distance;
                //调用原生代码移动蛋壳
                self.refs[PLU_IMAGE_KEY].shellUpward(distance);
            }
            lastMoveY=gestureState.moveY;

    lastMoveY是记录上次移动的距离,distance表示当前需要移动的距离,
    gestureState.dy 是touchMove方法返回的移动路程.

    在原生代码中处理移动

    double topMargin=iv_shell.getTop();
    topMargin-=args.getDouble(0)*FACTOR;
    iv_shell.layout(iv_shell.getLeft(),getIntValue(topMargin),iv_shell.   getRight(),iv_shell.getBottom());

    使用view.layout方法移动蛋壳的布局.

    本人项目中的运行效果:


    gif动画录得不太好,导致最后的动画效果有跳跃性,敬请谅解.

    完整代码下载

    展开全文
  • /** * Created by TaoLee on 2017/8/1. */ import React, {Component} from 'react'; import { View, StyleSheet, ListView, ...} from 'react-native'; import { SwRefreshScrollView, SwR
    /**
     * Created by TaoLee on 2017/8/1.
     */
    import React, {Component} from 'react';
    import {
      View,
      StyleSheet,
      ListView,
      Image,
      Text
    } from 'react-native';
    import {
      SwRefreshScrollView,
      SwRefreshListView,
      RefreshStatus,
      LoadMoreStatus
    } from 'react-native-swRefresh'
    export default class BaiKeList extends Component {
      _page = 0;
      _dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    
      constructor(props) {
        super(props);
        this.state = {
          url: 'https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=507799324,6939197&fm=73',
          content: '所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定',
          listItems: [],
        };
      }
    
      componentWillMount() {
        this.initData();
      }
    
      initData() {
        const urlPath = `http://192.168.0.222:28088/api/v1/baike/get-new-baike?resType=10`;
        fetch(urlPath, {
          method: 'GET',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
        })
          .then((response) => {
            //判空操作
            return response.json();
          })
          .then((json) => {
            this.setState({
              listItems: json.data,
            });
          })
          .catch((error) => {
            console.warn('askInfo request failed', error);
          });
      }
    
    
      // componentDidMount() {
      //   let timer = setTimeout(() => {
      //     clearTimeout(timer);
      //     // this.refs.scrollView.beginRefresh()
      //     this.refs.listView.beginRefresh()
      //   }, 500) //自动调用刷新 新增方法
      // }
    
      _renderRow(rowData) {
        return (
          <View style={styles.cell}>
            <Text>{'这是第' + rowData + '行'}</Text>
            <View style={styles.container}>
              <Image source={{uri: rowData.coverUrl, cache: 'force-cache'}} style={styles.image}/>
              <View style={styles.container_right}>
                <View style={styles.top}>
                  <Text style={styles.name}>{rowData.authors}</Text>
                  <Text style={styles.time}>{rowData.createTime}</Text>
                </View>
                <Text style={styles.content}>{rowData.description}</Text>
              </View>
            </View>
          </View>)
    
      }
    
      _onListRefresh(end) {
        let timer = setTimeout(() => {
          clearTimeout(timer);
          this._page = 0;
          let data = [];
          for (let i = 0; i < 10; i++) {
            data.push(i)
          }
          this.setState({
            listItems: data,
          });
          this.refs.listView.resetStatus();//重置上拉加载的状态
          end()//刷新成功后需要调用end结束刷新
          // this.refs.listView.endRefresh() //建议使用end() 当然 这个可以在任何地方使用
        }, 1500)
      }
    
      _onLoadMore(end) {
        let timer = setTimeout(() => {
          clearTimeout(timer);
    
    
    
          this._page++;
          let data = [];
          for (let i = 0; i < (this._page + 1) * 10; i++) {
            data.push(i)
          }
          this.setState({
            listItems: data,
          });
          //end(this._page > 2)//加载成功后需要调用end结束刷新 假设加载4页后数据全部加载完毕
          this.refs.listView.endLoadMore(this._page > 2)
        }, 2000)
      }
    
      render() {
        return (
          <SwRefreshListView
            dataSource={ this._dataSource.cloneWithRows(this.state.listItems)}
            ref="listView"
            renderRow={this._renderRow.bind(this)}
            onRefresh={this._onListRefresh.bind(this)}
            onLoadMore={this._onLoadMore.bind(this)}
            //isShowLoadMore={false}
            // renderFooter={() => {
            //   return (
            //     <View style={{backgroundColor: 'blue', height: 30}}>
            //       <Text>我是footer</Text>
            //     </View>)
            // }}
          />
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flexDirection: 'row',
        backgroundColor: '#ffffff',
        borderWidth: 0.5,
        borderColor: '#d6d7da',
        marginBottom: 14,
        paddingBottom: 14
      },
      image: {
        borderRadius: 45,
        width: 34,
        height: 34,
        marginLeft: 30,
        marginTop: 14,
      },
      container_right: {
        flex: 1,
        marginTop: 14,
        marginLeft: 16,
        marginRight: 30
      },
      top: {
        flexDirection: 'row',
      },
      name: {
        textAlign: 'left'
      },
      time: {
        fontSize: 12,
        color: '#d6d7da',
        flex: 1,
        textAlign: 'right'
      },
      content: {
        fontSize: 12,
        lineHeight: 20
      }
    })
    
    
    
    
    
    
    
    
    展开全文
  • react-native-pullRefreshScrollView https://github.com/lvming6816077/react-native-pullRefreshScrollView React Native Pull To Refresh Component for ios platform support ScrollView,ListView De

    react-native-pullRefreshScrollView

    https://github.com/lvming6816077/react-native-pullRefreshScrollView

    React Native Pull To Refresh Component for ios platform support ScrollView,ListView

    Demo

    ScrollView:

    ListView:

    How to use

    Download from npm
    npm install --save react-native-pullrefresh-scrollview
    Use in Scrollview
    import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
    
    render() {
    
            return (
                    <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
                        <View><Text>Scroll1</Text></View>
                    </PullRefreshScrollView>
            );
      }
    Use in Listview
    import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
    
    render() {
       return (
          <ListView
            renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props}     />}
    
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
           />
       );
    }
    
    image

    Only text

    Only image

    LoadMore

    End LoadMore

    props
    onRefresh:
    refreshedText: ''
    refreshingText: ''
    refreshText:''
    useLoadMore:false
    endText:''
    endingText:''
    indicatorArrowImg: { //  default arrow.png
        style:{},
        url:''
    }
    indicatorImg: {  //  default 
        style:{},
        url:''
    }
    refreshType:'normal'  // normal  image  text
    
    Regain the PullRefresh
    onRefresh(PullRefresh){
            PullRefresh.onRefreshEnd();
    }
    End the LoadMore
    onLoadMore(PullRefresh){
            PullRefresh.onLoadMoreEnd();
    }

    Advice

    mail:441403517@qq.com

    react-native-pullRefreshScrollView

    React Native下拉刷新组件 ios 平台 支持ScrollView,ListView

    效果展示

    ScrollView:

    ListView:

    如何引入

    从npm上下载组件
    npm install --save react-native-pullrefresh-scrollview
    在ScrollView中使用
    import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
    
    render() {
    
            return (
                    <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
                        <View><Text>Scroll1</Text></View>
                    </PullRefreshScrollView>
            );
      }
    在ListView中使用
    import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
    
    render() {
       return (
          <ListView
            renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props}     />}
    
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
           />
       );
    }
    
    定制图片

    纯文字

    纯图片

    上拉加载

    上拉加载完成

    props
    onRefresh:当触发刷新时的回调
    refreshedText: '释放立即刷新'
    refreshingText: '正在刷新数据中..'
    refreshText:'下拉可以刷新'
    useLoadMore:false //是否使用滚动加载功能 即上拉加载
    endText:'已经加载完成'
    endingText:'加载更多数据'
    indicatorArrowImg: { // 下拉箭头图片和样式 default arrow.png
        style:{},
        url:''
    }
    indicatorImg: {  // loading图片和样式 default 
        style:{},
        url:''
    }
    refreshType:'normal'  // normal  image  text
    
    收回下拉刷新
    onRefresh(PullRefresh){
            PullRefresh.onRefreshEnd();
    }
    结束滚动加载
    onLoadMore(PullRefresh){
            PullRefresh.onLoadMoreEnd();
    }
    展开全文
  • 之前写iOS时,有这非常好用的下拉刷新和上拉加载的组件如MJReferesh这样优秀的组件,但是最近写ReactNative时,一直没发现非常如意的第三方下拉刷新的组件,所以便自己写了一个简单好用的刷新组件*react-native-...
  • React Native 自定义下拉刷新组件 PullToRefresh针对猴急一些的同学,可以先在这个 Expo网站在线运行下demo看看效果 。完整的代码,在 Github仓库 。下拉刷新,是一个很常见的交互方式。React-Native(以下简称RN)...
  • react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原...
  • 本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • RCTRefreshControl 一个React Native 实现的下拉刷新控件
  • React Native 之自定义下拉刷新

    千次阅读 2017-02-16 09:29:56
    关于React Native下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了.最近将公司的Android端用RN重写一下,之前用的是PullToRefresh,于是准备用React Native写一套该效果出来. ...
  • 主要介绍了react native基于FlatList下拉刷新上拉加载实现代码示例
  • 本篇文章主要介绍了React Native中的RefreshContorl下拉刷新使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • rn自带的刷新库样式无法自定义,于是自己参考了 ios MJRefres android SmartLayout 并且参考了rn的相关库来实现了 和官方 RefreshControl 相同功能用法的库react-native-smart-refresh 1.首先给大家上一个预览图...
  • 下拉刷新我们使用 React Native 提供的组件 RefreshControl,去 NewsList.js 的 ListView添加: 原文链接:http://www.jianshu.com/p/b1e4e12fc762 style={{flex:1, backgroundColor:'white'}} ...
  • 主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 转自GItHub地址:https://github.com/greatbsky/react-native-pullview 这是一个实现下拉刷新react native组件,可支持android & ios,简单易用! 纯js代码,基于ScrollView封装. 比scrollv...
  • 我们先看一下今天要实现的效果:我们下拉的时候显示“下拉刷新状态“,当滑动到底部的时候自动显示“加载更多“。思路: 1、下拉刷新我们直接使用rn自带的RefreshControl。 2、当我们滑动到scrollview或者listview...
  • 本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 refreshing={this.state....
  • React Native】自定义列表下拉刷新

    千次阅读 2018-07-09 10:32:15
    关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。 同时支持android和ios,并且拥有...
  • 下拉刷新和刚进入页面之后就刷新
  • react native实现上拉加载下拉刷新

    千次阅读 2017-01-16 21:30:07
    前言我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRefresh等都是比较好用,且实现上比较简单的第三方库。他们的实现原理大体相同,都是在...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 308
精华内容 123
关键字:

reactnative下拉刷新