在shopify的FlashList中，如果内容较小，将高度设置为500px并不会缩小列表，这与React Native的FlatList不同

Question

我之前在 React Native 中使用过 FlatList。当我将列表高度设置为 500px 时，如果内容较小，平面列表会自动缩小到内容大小，但如果内容较大，则最多需要 500px。然而，在Shopify的flashlist中，当我将高度设置为500px时，当内容较小时，它不会像flatlist那样缩小。这导致用户界面看起来很奇怪。

 <View style={{ flex: !height && 1 }}>
      <SearchFilterComponent
        columns={columns}
        initialValues={{ filters: tableFilters?.filters }}
        onSubmitFilters={onSubmitFilters}
      />
      <View
        style={{
          height: height || Dimensions.get("screen").height - 210,
        }}
      >
        <FlashList
          data={tableData.data}
          refreshing={refreshing}
          onRefresh={tableData?.pageable && handleRefresh}
          onEndReachedThreshold={1}
          onEndReached={() => {
            tableData?.pageable && fetchNextPage();
          }}
          ListEmptyComponent={!(isLoading || refreshing || tableData?.data?.length) && <Empty />}
          renderItem={({ item, index }) => <RenderMemoItem item={item} index={index} />}
          estimatedItemSize={400}
          keyExtractor={(item, index) => String(item?.id || index)}
          ListFooterComponent={
            <>
              {!isLoading && footer && <>{footer}</>}
              {isLoading && <Loader count={10} />}
            </>
          }
        />
      </View>
      {onCreateAction || actions?.length ? (
        <FloatingAction
          showBackground={false}
          actionsPaddingTopBottom={0}
          actions={actions}
          color="#1F62FF"
          iconHeight={28}
          iconWidth={28}
          buttonSize={51}
          floatingIcon={<Octicons name="plus" size={32} color="white" />}
          onPressBackdrop={() => null}
          onPressMain={() => {
            onCreateAction && onCreateAction();
          }}
          onPressItem={(name) => {}}
        />
      ) : (
        <></>
      )}
    </View>

我已经尝试过最小高度，但仍然不起作用。当列表中只有一项时，它会占据整个 500px。

Answer 1

要解决此问题，请尝试使用 maxHeight 而不是 height。这样，列表将扩展到您设置的最大高度，但当内容较少时会缩小。

以下是修改代码的方法：

<View style={{ flex: !height && 1 }}>
  <SearchFilterComponent
    columns={columns}
    initialValues={{ filters: tableFilters?.filters }}
    onSubmitFilters={onSubmitFilters}
  />
  <View
    style={{
      maxHeight: height || Dimensions.get("screen").height - 210,
    }}
  >
    <FlashList
      data={tableData.data}
      refreshing={refreshing}
      onRefresh={tableData?.pageable && handleRefresh}
      onEndReachedThreshold={1}
      onEndReached={() => {
        tableData?.pageable && fetchNextPage();
      }}
      ListEmptyComponent={
        !(isLoading || refreshing || tableData?.data?.length) && <Empty />
      }
      renderItem={({ item, index }) => (
        <RenderMemoItem item={item} index={index} />
      )}
      estimatedItemSize={400}
      keyExtractor={(item, index) => String(item?.id || index)}
      ListFooterComponent={
        <>
          {!isLoading && footer && <>{footer}</>}
          {isLoading && <Loader count={10} />}
        </>
      }
    />
  </View>
  {onCreateAction || actions?.length ? (
    <FloatingAction
      showBackground={false}
      actionsPaddingTopBottom={0}
      actions={actions}
      color="#1F62FF"
      iconHeight={28}
      iconWidth={28}
      buttonSize={51}
      floatingIcon={<Octicons name="plus" size={32} color="white" />}
      onPressBackdrop={() => null}
      onPressMain={() => {
        onCreateAction && onCreateAction();
      }}
      onPressItem={(name) => {}}
    />
  ) : (
    <></>
  )}
</View>

通过使用

maxHeight

，您的

FlashList

将根据内容调整其大小，直至达到您指定的最大高度。当内容较少时，这应该会使您的 UI 看起来像预期的那样。