React Native 实现无侵入自定义下拉刷新组件

Overview

react-native-ly-refresh-control

下拉刷新

iOS 基于MJRefresh 通过RCTCustomRefreshContolProtocol实现RefreshControl组件封装 JS端可以无侵入自定义下拉刷新只需要替换对应的refreshControl

Android 未完成

Installation

yarn react-native-ly-refresh-control

Usage

import LYRefreshControl from "react-native-ly-refresh-control";

<ScrollView
  style={styles.scroll}
  refreshControl={
    <LYRefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      idleSources={[
        require('./assets/dropdown_anim__0001.png'),
        require('./assets/dropdown_anim__0002.png'),
        require('./assets/dropdown_anim__0003.png'),
        require('./assets/dropdown_anim__00020.png'),
        require('./assets/dropdown_anim__00021.png'),
        require('./assets/dropdown_anim__00030.png'),
        require('./assets/dropdown_anim__00031.png'),
      ]}
      refreshingSources={[
        require('./assets/dropdown_loading_01.png'),
        require('./assets/dropdown_loading_02.png'),
        require('./assets/dropdown_loading_03.png'),
      ]}
    />
  }
>
  ...
</ScrollView>

Live

TODO

  • iOS 更多属性控制
  • android 基于 SmartRefreshLayout 实现

License

MIT

You might also like...
iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android).
iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android).

FinanceReactNative iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android). Data is pulled from Yahoo Finance

React Native Photo Editor (RNPE)
React Native Photo Editor (RNPE)

React Native Photo Editor (RNPE) 🌄 Image editor using native modules for iOS an

Discover Movies and TV shows -  React Native
Discover Movies and TV shows - React Native

movieapp Discover Movies and TV shows Download APK file Download from Google Drive - v2.2.1 What's included Name Description React Native Build Native

All my React Native examples

ReactNativeExamples All my React Native examples and experiements can be found here. This repo is divided into two sub folders, Instructions git clone

React Native Twitch application
React Native Twitch application

Notes I'm going to rewrite this project 😉 . Be ready to new Twitch application. Twitch This project was built for The Rolling Scopes #18 meetup. As o

React Native Todo List example app which uses Redux for managing app state
React Native Todo List example app which uses Redux for managing app state

react-native-redux-todo-list A sample todo list app developed by using React Native and Redux. How to run the app Install react-native If you don't ha

A simple To Do application written in React Native

Example To Do List application in react-native Requirements, install as needed: React Native: $ npm i -g react-native-cli watchman: $ brew install wa

A property finder application written using React Native

React Native PropertyFinder App This repository accompanies the tutorial I published on Ray Wenderlich's website, which describes the process of build

🏀 iOS and Android NBA app created with React Native
🏀 iOS and Android NBA app created with React Native

Swish An iOS and Android NBA app created with React Native. If you would like to request a feature, find a bug, have a question, or would like to leav

Owner
少言
面朝大海,春暖花开
少言
React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

Tibb 6 Nov 28, 2022
A react native interface for integrating payments using Braintree

A react native interface for integrating payments using Braintree

eKreative 17 Dec 30, 2022
iOS 15 share play API in react-native

react-native-shareplay iOS 15 share play API in react-native Installation yarn add react-native-shareplay And go to Xcode Capabilities and enable "Gro

Popshop Live 27 Oct 16, 2022
React Native package for interacting with HomeKit devices

React Native package for interacting with HomeKit devices

Ibrahim Berat Kaya 4 Dec 24, 2021
react native esptouch

react-native-esptouch One should know that This is a Unofficial project. The official demo is below: EsptouchForAndroid EsptouchForIOS Getting started

五毛共和国 Wumaoland 0 Oct 25, 2021
React Native Template for Taro

React Native Template for Taro requirement taro: @tarojs/cli@^3.2.0 framework: 'react' quick start install react native library install peerDependenci

null 1 Nov 20, 2021
A suite of IoT tools to use with React Native.

react-native-iot-tools WIP. A suite of IoT tools for React Native applications. Package iOS Android @react-native-iot-tools/bluetooth ✅ ❌ @react-nativ

Sara Pope 3 Oct 31, 2022
A testing MQTT react native library

react-native-awesome-testing abc Installation npm install react-native-awesome-testing Usage import { multiply } from "react-native-awesome-testing";

null 0 Nov 26, 2021
Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

Dhairya Sharma 5 Sep 13, 2022
Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

Dhairya Sharma 5 Sep 13, 2022