React 中 React Native 的 FlatList 等价物

Question

有没有等价的FlatList component from React Native in React? Having built a mobile app in React Native, I'm now converting it to React for a web app. (Have considered using react-native-web，但是已经决定不用了，主要是想学React。）

如果没有等价物，我一直在考虑只使用 map() to render all the items via an Item component that I build, also as demonstrated here in the docs and in this 。

Answer 1

这个项目包含了很多 Flat List/ListView 的特性 - 但似乎很赞同它，它是针对 React Native 和 Web 的，你可以阅读这篇文章：

https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

一些有趣的观点：

FlatList:

FlatList is amazing and comes with tons of features. It even lets you render separators and comes with a built in customisable view tracker which is something we were interested in.

FlatList is a virtualized listview and it does so by unmounting views that have gone out of viewport. It does help bring down overall memory usage down but there are cons to this approach:

Views on native end get destroyed causing lot of garbage collection. Views need to be recreated now as you scroll up which might be a problem if the scroll is quick.

项目：

https://github.com/Flipkart/recyclerlistview

Answer 2

React-Native 通过 JavaScript.

公开原生 Andriod 和 iOS 组件来工作

Android和iOS有各自的ListViews，在使用FlatList时内部调用。

HTML 没有等同于 iOS 和 Android.
上的 ListView 的列表组件您可以使用像 https://github.com/Flipkart/recyclerlistview 这样的库，或者使用 Array.map 到 return divs 并自己实现等效的滚动逻辑。

Answer 3

没有像 react-native 那样的特定组件来做这种事情，所以我通常只是使用 map() 来实现这种事情。

但如果它是可重用的，您当然可以为自己创建一个 List 组件，这样您就不会每次都为同一个列表编写 map() 函数。

有点像这样：

function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}

Answer 4

有一个名为 flatlist-react 的 React 组件（npm install flatlist-react），您可以使用它来呈现列表，例如：

<FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>

它还可以为您处理诸如排序、分组、过滤和布局样式之类的事情。

项目：

https://github.com/ECorreia45/flatlist-react

Answer 5

React 官方网站suggests the react-window and react-virtualized

Answer 6

我为此创建了一个组件

export const FlatList = ({
  items,
  RenderItem,
  ListHeaderComponent,
  ListFooterComponent,
  ListEmptyComponent,
}) => {
  // console.log(Render)

  // console.log(items, "items");

  if (Array.isArray(items)) {
    const render = items.map((v, i) => {
      return RenderItem({ data: v, key: i });
    });

    // console.log(render, "render");

    if (render.length) {
      return (
        <React.Fragment>
          {ListHeaderComponent ? ListHeaderComponent() : null}
          {render}
          {ListFooterComponent ? ListFooterComponent() : null}
        </React.Fragment>
      );
    }

    return (
      <React.Fragment>
        {ListHeaderComponent ? ListHeaderComponent() : null}
        {ListEmptyComponent ? ListEmptyComponent() : null}
        {ListFooterComponent ? ListFooterComponent() : null}
      </React.Fragment>
    );
  }

  if (ListHeaderComponent || ListEmptyComponent || ListEmptyComponent) {
    return (
      <React.Fragment>
        {ListHeaderComponent ? ListHeaderComponent() : null}

        {ListEmptyComponent ? ListEmptyComponent() : null}
        {ListFooterComponent ? ListFooterComponent() : null}
      </React.Fragment>
    );
  }
  return null;
};

我是这样用的

            <FlatList items={dataAdmin} RenderItem={RenderAdmins} />

您不必担心密钥，此组件会自动处理。您的 RenderItem 组件应如下所示

const RenderAdmins = ({ data, key }) => {
  const org = data.organization;
  if (org) {
    return (
      <StyledTableRow key={key}>
        <StyledTableCell align="center">{org.name}</StyledTableCell>
        <StyledTableCell align="center">{data.email}</StyledTableCell>
        <StyledTableCell align="center">{org.phone}</StyledTableCell>
        <StyledTableCell align="center">{data.phone}</StyledTableCell>
        <StyledTableCell align="center">
          {data.first_name + " " + data.last_name}
        </StyledTableCell>
        <StyledTableCell align="center">{org.address}</StyledTableCell>
        <StyledTableCell align="center">Eti Osa</StyledTableCell>
      </StyledTableRow>
    );
  }
  return null;
};

您的项目应该是一个数组。

React 中 React Native 的 FlatList 等价物

Equivalent of FlatList from React Native in React

javascript

reactjs

react-native

react-native-flatlist