Dingdong_app/components/ListComponent.js

import React from "react";
import { StyleSheet } from "react-native";
import { initDataState, DataListReducer } from "../Redux/DataListRedux";
import { Divider, List, Layout } from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import EmptyComponent from "./EmptyComponent";

export default function ListComponent(props) {
    const [state, dispatch] = React.useReducer(DataListReducer, initDataState);
    const { page, size, finish, loading, refreshing, dataList, error } = state;
    const {
        getInfo,
        renderItem,
        ListHeaderComponent,
        style,
        separatorStyle,
        ListFooterComponent,
        showEmpty,
        emptyEvent,
        showList,
        extraData,
        delId,
        setChild,
        startState,
    } = props;

    useFocusEffect(
        React.useCallback(() => {
            if (startState != false) {
                onRefresh();
            }
        }, [])
    );
    React.useEffect(() => {
        if (startState) {
            onRefresh();
        }
    }, [startState]);

    function getList() {
        if (getInfo != null) {
            return getInfo(page, size).then(res => {
                console.log(res);
                if (emptyEvent) {
                    if (res.numberOfElements === 0) {
                        emptyEvent(true);
                    } else {
                        emptyEvent(false);
                    }
                }

                dispatch({
                    type: "setInfo",
                    payload: { list: res.content, finish: res.last },
                });
            });
        } else {
            return Promise.reject();
        }
    }

    React.useEffect(() => {
        if (delId) {
            let list = [...dataList];
            let Index = list.findIndex(item => {
                return item.id === delId;
            });
            if (Index != -1) {
                dispatch({
                    type: "remove",
                    payload: { index: Index },
                });
            }
        }
    }, [delId]);

    // 刷新接口
    function onRefresh() {
        dispatch({ type: "startPageMore" });
        getList()
            .then(() => {
                dispatch({ type: "pageMoreSuccess" });
            })
            .catch(e => {
                dispatch({
                    type: "pageMoreError",
                    payload: { error: e.message },
                });
            });
    }

    // 到页面底部加载更多
    function gotEnd() {
        dispatch({ type: "startRefresh" });
        getList()
            .then(() => {
                dispatch({ type: "refreshSuccess" });
            })
            .catch(e => {
                dispatch({
                    type: "refreshError",
                    payload: { error: e.message },
                });
            });
    }

    const changePorps = React.useMemo(() => {
        let _props = { renderItem: () => <Layout /> };
        if (showList != false) {
            _props = { renderItem: renderItem };
            if (showEmpty) {
                _props = {
                    ..._props,
                    ListEmptyComponent: EmptyComponent,
                };
            }
            if (extraData) {
                _props = {
                    ..._props,
                    extraData,
                };
            }
        }
        return _props;
    }, [showList, showEmpty, extraData]);

    return (
        <List
            refreshing={refreshing}
            style={[style]}
            data={dataList}
            ListHeaderComponent={ListHeaderComponent}
            onRefresh={onRefresh}
            onEndReached={0.2}
            ItemSeparatorComponent={() => <Divider style={[separatorStyle]} />}
            onEndReachedThreshold={gotEnd}
            ListFooterComponent={ListFooterComponent}
            {...changePorps}
        />
    );
}