RefreshList

基于FlatList封装的下拉刷新及上拉加载列表

基本用法

import { RefreshList, RefreshState } from 'react-native-maui';

const Refresh: React.FC<RefreshProps> = () => {
  const [data, setData] = useState<number[]>([]);
  const [status, setStatus] = useState<RefreshState>(RefreshState.Idle);

  useEffect(() => {
    const list = mockArray();
    setData(list);
  }, []);

  return (
    <View style={styles.container}>
      <RefreshList
        refreshState={status}
        data={data}
        onRefresh={() => {
          setStatus(RefreshState.HeaderRefreshing);
          setTimeout(() => {
            const list = mockArray();
            setData(list);
            setStatus(RefreshState.Idle);
          }, 2000);
        }}
        onFooterRefresh={() => {
          setStatus(RefreshState.FooterRefreshing);
          setTimeout(() => {
            const list = mockArray();
            setData((data) => data.concat(list));
            setStatus(RefreshState.Idle);
          }, 2000);
        }}
        renderItem={({ item }) => {
          return (
            <View style={styles.item}>
              <Text>{item}</Text>
            </View>
          );
        }}
      />
    </View>
  );
};

属性

名称	描述	类型	默认值
data Required	数据源	string	-
refreshState Required	当前列表状态	RefreshState	RefreshState.Idle
renderItem Required	子组件	React.Node	-
onHeaderRefresh	下拉刷新方法	() => void	-
onFooterRefresh	上拉加载方法	() => void	-
footerRefreshingText	上拉加载时文字内容	string	数据加载中
footerFailureText	上拉加载失败时文字内容	string	点击重新加载
footerNoMoreDataText	上拉加载没有更多数据	string	已加载全部数据
canRefresh	是否可以下拉和上拉	boolean	true
refreshListActivityIndicatorColor	下拉刷新Loading颜色	string	-
ref	ref	-	-
...otherProps	其他FlatList属性及方法	FlatListProps	-

RefreshState

列表当前状态

名称	描述
Idle	正常状态
HeaderRefreshing	正在下拉刷新
FooterRefreshing	正在上拉加载
NoMoreData	没有更多的数据了
Failure	上拉加载失败