@sdcx/pull-to-refresh/dist/Footer/DefaultPullToRefreshFooter.js

A react-native PullToRefresh component.

import React, { useCallback, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { PullToRefreshStateIdle, PullToRefreshStateRefreshing, } from '../types';
import { PullToRefreshFooter } from './native';
export function DefaultPullToRefreshFooter(props) {
    const { onRefresh, refreshing, noMoreData } = 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 footer offset', event.nativeEvent.offset);
    }, []);
    return (<PullToRefreshFooter style={styles.container} manual onOffsetChanged={onOffsetChanged} onStateChanged={onStateChanged} onRefresh={onRefresh} refreshing={refreshing} noMoreData={noMoreData}>
      <Text style={styles.text}>{noMoreData ? '没有更多数据了' : text}</Text>
    </PullToRefreshFooter>);
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        backgroundColor: 'red',
    },
    text: {
        paddingVertical: 16,
        fontSize: 17,
        color: 'white',
    },
});