Question

我已经在tableView上设置了refreshControl，如下所示：

import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";

import "./styles.css";

const handleAsync = () => {
  // isLoading = true
  // async done
  // isLoading = false
}

function App() {
  return (
    <MaterialTable
      columns={[
        {
          title: <button onClick={handleAsync}>async</button>
        },
        {
          title: "Avatar",
          field: "avatar",
          render: rowData => (
            <img
              style={{ height: 36, borderRadius: "50%" }}
              src={rowData.avatar}
            />
          )
        },
        { title: "Id", field: "id" },
        { title: "First Name", field: "first_name" },
        { title: "Last Name", field: "last_name" }
      ]}
      data={query =>
        new Promise((resolve, reject) => {
          let url = "https://reqres.in/api/users?";
          url += "per_page=" + query.pageSize;
          url += "&page=" + (query.page + 1);
          fetch(url)
            .then(response => response.json())
            .then(result => {
              resolve({
                data: result.data,
                page: result.page - 1,
                totalCount: result.total
              });
            });
        })
      }
      title="Remote Data Example"
    />
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以下是一些图片供参考： https://imgur.com/a/QDEyzRi

当用户滚动TableView时，活动指示器与第一个单元格重叠。（图片1和2）

当我向下滚动tableView直到它处于“正常”状态的点，而没有装填refreshControl时，指示符将隐藏。（图3）

我希望当refreshControl与第一个单元格发生碰撞时总是隐藏起来。

我已经尝试过在tableView的第一个索引上添加refreshControl，但由于其单元格是透明的，所以无法将其推送到后台。

Answer 1

就像我的评论中提到的那样，您必须为自己的UITableView设置背景色。
否则，活动指示器将在表格视图下方可见-这是有道理的，因为它位于表格视图后面，但表格视图是透明的，因此可以看到活动指示器视图。

为此，可能存在第三方解决方案，其中实现了自定义活动指示器，但是对于本机，则没有其他解决方案。

tableView的UIRefreshControl覆盖滚动时的第一个单元格

1 个答案: