FlatList 中的悬念

Question

我正在使用 Relay 开发一个 React Native 应用程序。我在

FlatList

中使用

ScrollView

，如下所示：

<ScrollView>
  ...

  <Suspense>
    <FlatList />
  </Suspense>
</ScrollView>

我遇到了

ondEndReached

的问题（每次都会被调用），所以我转向了这样的事情：

<FlatList
  ListHeaderComponent={...}
  ...
/>

工作正常（

onEndReached

在必要时被调用），但是当我使用Relay时，我必须使用

Suspense

来添加旋转器/加载器，如果我将

FlatList

包裹在

Suspense

中将暂停所有组件（包括标题）而不仅仅是项目。

您对如何进步有任何想法吗？一种替代方法是使其在

FlatList

内的

ScrollView

工作，另一种方法是使其仅对

Suspense

中的项目在

FlatList

工作。谢谢！

Answer 1

当使用中继（或任何其他具有 Suspense 和 FlatList 的库）时，您可以在 Suspense 后备中复制列表头，假设它仅在初始渲染中挂起 - onEndReach 不应触发 Suspense。

const MyListHeader = () => <>{...}</>

const MyList = (props) => <FlatList {...props} />

const Fallback = () => (
  <MyList
     ListHeaderComponent={MyListHeader}
     data={[]}
     renderItem={() => null}
     scrollEnabled={false}
  />
)

const MyListWithRelay = (queryRef) => {
  const queryKey = usePreloadedQuery(MyQuery, queryRef)
  const { data } = usePaginationFragment(graphql`...`, queryKey)
  return (
    <MyList
      {...}
      data={data.connection.edges}
    />
  )
}

const Screen = (queryRef) =>  (
  <Suspense fallback={<Fallback />}>
    <MyListWithRelay queryRef={queryRef} />
  </Suspense>
)