@sdcx/pull-to-refresh/dist/PullToRefresh/DefaultPullToRefreshHeader.js

A react-native PullToRefresh component.

import React, { useCallback, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { PullToRefreshStateIdle, PullToRefreshStateRefreshing, } from '../types';
import { PullToRefreshHeader } from '../Header';
export default function DefaultPullToRefreshHeader(props) {
    const { onRefresh, refreshing, progressViewOffset } = props;
    const [text, setText] = useState('下拉刷新');
    const onStateChanged = useCallback((event) => {
        const state = event.nativeEvent.state;
        if (state === PullToRefreshStateIdle) {
            setText('下拉刷新');
        }
        else if (state === PullToRefreshStateRefreshing) {
            setText('正在刷新...');
        }
        else {
            setText('松开刷新');
        }
    }, []);
    const onOffsetChanged = useCallback((event) => {
        console.log('refresh header offset', event.nativeEvent.offset);
    }, []);
    return (<PullToRefreshHeader style={styles.container} onOffsetChanged={onOffsetChanged} onStateChanged={onStateChanged} onRefresh={onRefresh} refreshing={refreshing} progressViewOffset={progressViewOffset}>
			<Text style={styles.text}>{text}</Text>
		</PullToRefreshHeader>);
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        backgroundColor: 'red',
    },
    text: {
        paddingVertical: 16,
        fontSize: 17,
        color: 'white',
    },
});