React Native Drop Refresh: Một thành phần nhẹ và có thể tùy chỉnh

react-native-drop-refresh

Một điều khiển kéo xuống để làm mới cho react native. Đây là phiên bản được phân nhánh từ Shuangzuan/RCTRefreshControl.

Duy trì npm tốt hơn, chúng tôi rất hoan nghênh các vấn đề.

Cập nhật 2.2.0 Hỗ trợ react-native 0.40.0, thay đổi cú pháp CMD thành ES6.

Cập nhật 2.1.0 Hỗ trợ react-native 0.20.0, giải quyết vấn đề xung đột tên mô-đun.

Ảnh chụp màn hình

Cài đặt

. Chạy npm install react-native-drop-refresh --save trong thư mục dự án của bạn.
. Chạy react-native link để liên kết thư viện.
. Thêm import DropRefreshControl from 'react-native-drop-refresh'; vào mã của bạn.

Sử dụng

import React, { Component } from 'react';
import DropRefreshControl from 'react-native-drop-refresh';

import {
  AppRegistry,
  ListView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from 'react-native';

var SCROLLVIEW = 'ScrollView';
var LISTVIEW = 'ListView';

class RCTRefreshControlDemo extends Component{
  constructor(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1']),
    }
  }

  componentDidMount() {
    // ScrollView
    DropRefreshControl.configure({
      node: this.refs[SCROLLVIEW],
      tintColor: '#05A5D1',
      activityIndicatorViewColor: '#05A5D1'
    }, () => {
      setTimeout(() => {
        DropRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);
      }, 2000);
    });

    // ListView
    DropRefreshControl.configure({
      node: this.refs[LISTVIEW]
    }, () => {
      setTimeout(() => {
        DropRefreshControl.endRefreshing(this.refs[LISTVIEW]);
      }, 2000);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView ref={SCROLLVIEW} style={styles.scrollView}>
          <View style={{backgroundColor: '#05A5D1', height: 200}} />
          <View style={{backgroundColor: '#FDF3E7', height: 200}} />
          <View style={{backgroundColor: '#484848', height: 200}} />
        </ScrollView>

        <ListView
          ref={LISTVIEW}
          style={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => {
            var color = rowData;
            return (
              <View style={{backgroundColor: color, height: 200}} />
            );
          }}
        />
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

AppRegistry.registerComponent('DropRefreshControlDemo', () => DropRefreshControlDemo);
// use `export default DropRefreshControlDemo` instead to use this as an component;

Giấy phép

Có sẵn dưới giấy phép MIT. Xem tệp LICENSE để biết thêm thông tin.

Thông tin tải về:

Tác giả: react-native-china
Nguồn: https://github.com/react-native-china/react-native-drop-refresh