【React Native】自定義列表下拉刷新

        關於React Native List的下拉刷新，雖然官方出了一個控件RefreshControl，但可定製性太差，基本上樣式固定了。爲了滿足項目需求，我在GitHub上搜到了這個組件，使用起來非常不錯。

        同時支持android和ios，並且擁有相同的Api，可以自定義下拉刷新樣式；它裏面已經實現了View,Scrollview,Listview和Flatlist的下拉刷新，可以支持絕大多數的React Native中的組件實現下拉刷新功能。

安裝

        yarn add react-native-rk-pull-to-refresh

如果link失敗就需要手動link

        react-native link react-native-rk-pull-to-refresh

使用提醒

        它內部包含了PullView、PullScrollView,、PullListView和PullFlatList，如果你想使用PullFlatList的話，那麼你要保持你的React Native版本在0.43及以上。並且你要添加如下的代碼到FlatList(node_modules/react-native/Libraries/Lists/FlatList.js)中：

...
getScrollMetrics = () => {
    return this._listRef.getScrollMetrics()
}

...

        同時在VirtualizedList(node_modules/react-native/Libraries/Lists/VirtualizedList.js)中添加如下代碼：

...
 getScrollMetrics = () => {
    return this._scrollMetrics
 }

 ...

屬性

Porp	Type	Optional	Default	Description
refreshable	bool	yes	true	是否需要下拉刷新功能
isContentScroll	bool	yes	false	在下拉的時候內容時候要一起跟着滾動
onPullRelease	func	yes		刷新的回調
topIndicatorRender	func	yes		下拉刷新頭部的樣式，當它爲空的時候就使用默認的
topIndicatorHeight	number	yes		下拉刷新頭部的高度，當topIndicatorRender不爲空的時候要設置正確的topIndicatorHeight
onPullStateChangeHeight	func	yes		下拉時候的回調，主要是刷新的狀態的下拉的距離
onPushing	func	yes		下拉時候的回調，告訴外界此時是否在下拉刷新

方法

        startRefresh():手動調用下拉刷新功能 

        finishRefresh():結束下拉刷新

使用樣例

PullListView默認樣式

import React, {PureComponent} from 'react';
import {ListView, View, Text, Dimensions} from 'react-native';
import {PullListView} from 'react-native-rk-pull-to-refresh'
const width = Dimensions.get('window').width
export default class PullListViewDemo extends PureComponent {
    constructor(props) {
        super(props);
        this.dataSource =
            new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.getDataSource())
    }

    getDataSource = () => {
        let array = new Array();
        for (let i = 0; i < 50; i++) {
            array.push(`ListViewItem:${i + 1}`);
        }
        return array;
    }

    render() {
        return (
            <PullListView
                ref={(c) => this.pull = c}
                isContentScroll={true}
                style={{flex: 1, width: width}}
                onPushing={this.props.onPushing}
                onPullRelease={this._onPullRelease}
                dataSource={this.dataSource}
                renderRow={this._renderRow}/>
        )
    }

    _onPullRelease = () => {
        setTimeout(() => {
            this.pull && this.pull.finishRefresh()
        }, 2000)
    }

    _renderRow = (rowData) => {
        return (
            <View style={{width: width, height: 50, justifyContent: 'center', alignItems: 'center'}}>
                <Text>{rowData}</Text>
            </View>);
    }

    componentDidMount() {
        this.pull && this.pull.startRefresh()
    }

}

 

PullView自定義樣式

import React, {PureComponent} from 'react';

import {View, Text, Dimensions, StyleSheet, ActivityIndicator} from 'react-native';

import {PullView} from 'react-native-rk-pull-to-refresh'

const width = Dimensions.get('window').width
const topIndicatorHeight = 50

export default class PullViewDemo extends PureComponent {
    render() {
        return (
            <PullView
                ref={(c) => this.pull = c}
                style={{flex: 1, width: width}}
                topIndicatorRender={this.topIndicatorRender}
                topIndicatorHeight={topIndicatorHeight}
                onPullStateChangeHeight={this.onPullStateChangeHeight}
                onPushing={this.props.onPushing}
                onPullRelease={this._onPullRelease}>
                <Text style={{flex: 1, width: width, paddingTop: 200, textAlign: 'center'}}>這是內容</Text>
            </PullView>
        )
    }

    onPullStateChangeHeight = (pullState, moveHeight) => {
        if (pullState == 'pulling') {
            this.txtPulling && this.txtPulling.setNativeProps({style: styles.show});
            this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
        } else if (pullState == 'pullok') {
            this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
            this.txtPullok && this.txtPullok.setNativeProps({style: styles.show});
            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
        } else if (pullState == 'pullrelease') {
            this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
            this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.show});
        }
    }

    topIndicatorRender = () => {
        return (
            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: topIndicatorHeight}}>
                <ActivityIndicator size="small" color="gray" style={{marginRight: 5}}/>
                <Text ref={(c) => this.txtPulling = c} style={styles.hide}>pulling...</Text>
                <Text ref={(c) => this.txtPullok = c} style={styles.hide}>pullok...</Text>
                <Text ref={(c) => this.txtPullrelease = c} style={styles.hide}>pullrelease...</Text>
            </View>
        );
    }

    _onPullRelease = () => {
        setTimeout(() => {
            this.pull && this.pull.finishRefresh()
        }, 2000)
    }

    componentDidMount() {
        this.pull && this.pull.startRefresh()
    }
}

const styles = StyleSheet.create({
    hide: {
        position: 'absolute',
        left: 10000,
        backgroundColor: 'transparent'
    },
    show: {
        position: 'relative',
        left: 0,
        backgroundColor: 'transparent'
    }

});

 

參考鏈接：https://github.com/hzl123456/react-native-rk-pull-to-refresh