npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fsc-react-native-smartrefreshlayoutx

v0.0.2

Published

基于android SmartRefreshLayout的封装 支持切换语言

Downloads

5

Readme

React Native SmartRefreshLayout npm version

React-Native-SmartRefreshLayout是基于Android SmartRefreshLayout 开发的插件 ,可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义

HeaderComponent现在支持任意的RN组件,但是需要放在AnyHeader的组件中,其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画, 如果下拉和释放过程不需要过程动画,则使用onPullDownToRefresh和onReleaseToRefresh即可实现。 请看示例:Example HuaweiRefreshControlLottieRefreshControl

IOS自定义下拉刷新组件见React-Native-MJRefresh

建议:该组件与lottie-react-native配合使用可获得绝佳的下拉动画效果

安装

第一步

工程目录下运行:

npm install --save react-native-smartrefreshlayout

or (已经安装了yarn)

yarn add react-native-smartrefreshlayout

第二步

工程目录下运行:

react-native link react-native-smartrefreshlayout

使用

在工程中导入:

import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout';
//使用方法和RN官方的RefreshControl类似,
            <ScrollView
                refreshControl={<SmartRefreshControl
                    ref={ref => this.rc = ref}
                    HeaderComponent={<DefaultHeader/>}
                    onRefresh={() => {
                        setTimeout(() => {
                            this.rc && this.rc.finishRefresh();
                        }, 1000)
                    }}
                />}
            >
            </ScrollView>

组件

SmartRefreshControl

其他组件查看AnyHeaderDefaultHeaderClassicsHeaderStoreHouseHeader

查看属性

查看方法

文档

Props

HeaderComponent

用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。

NOTE

必须传入插件中给出的Header组件,如AnyHeader,DefaultHeader等

| Type | Required | | ---- | -------- | | Element | No |


renderHeader

用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。

NOTE

必须传入插件中给出的Header组件,如AnyHeader,DefaultHeader等

| Type | Required | | ---- | -------- | | Element/func | No |


enableRefresh

是否启用下拉刷新,默认为true

| Type | Required | | ---- | -------- | | boolean | No |


headerHeight

设定header的高度

NOTE

自定义 header 时应指定headerHeight。

| Type | Required | | ---- | -------- | | number | No |


primaryColor

设置刷新组件的主调色

| Type | Required | | ---- | -------- | | string | No |


autoRefresh

NOTE

time字段含义:延迟time毫秒后自动刷新

是否自动刷新

| Type | Required | | ---- | -------- | | object:{refresh:boolean, time:number} | No |


pureScroll

是否启用纯滚动

| Type | Required | | ---- | -------- | | boolean | No |


overScrollBounce

是否允许越界回弹

| Type | Required | | ---- | -------- | | boolean | No |


overScrollDrag

是否启用越界拖动,类似IOS样式。

| Type | Required | | ---- | -------- | | boolean | No |


dragRate

设置组件下拉高度与手指真实下拉高度的比值,默认为0.5。

| Type | Required | | ---- | -------- | | number | No |


maxDragRate

设置最大显示下拉高度与header标准高度的比值,默认为2.0。

| Type | Required | | ---- | -------- | | number | No |


onPullDownToRefresh

可下拉刷新时触发

| Type | Required | | ---- | -------- | | function | No |


onReleaseToRefresh

可释放刷新时触发

| Type | Required | | ---- | -------- | | function | No |


onRefresh

刷新时触发

| Type | Required | | ---- | -------- | | function | No |


onHeaderReleased

Header释放时触发

| Type | Required | | ---- | -------- | | function | No |


onHeaderPulling

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header下拉过程中触发

| Type | Required | | ---- | -------- | | function | No |


onHeaderReleasing

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header释放过程中触发

| Type | Required | | ---- | -------- | | function | No |


onHeaderMoving

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header移动过程中触发,包括下拉过程和释放过程。

| Type | Required | | ---- | -------- | | function | No |

Methods

finishRefresh

   finishRefresh([params]);

完成刷新

| Name | Type | Required| | ---- | -------- |-----| | params | object | NO |

Valid params keys are:

  • delayed (number) - 延迟完成刷新的时间
  • success (boolean) - 是否刷新成功,暂时没有影响

示例