【问题标题】:React native List footer component not rendering(funtion component)反应本机列表页脚组件未显示(功能组件)
【发布时间】:2022-01-07 18:53:48
【问题描述】:

我试图在 react native 中实现无限滚动分页。我想在加载时在平面列表组件的底部呈现加载微调器。 (注意:我正在为这个应用程序使用 Expo)

const renderFooter = () => {
    if (!category.loading) return null;

    return (
      <View style={spinnerStyles.container}>
        <ActivityIndicator animating size="large" color="#0000ff" />
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        columnWrapperStyle={{ justifyContent: "space-between" }}
        numColumns={2}
        data={category.data}
        renderItem={categoryItem}
        keyExtractor={(item) => item._id + item.sub_category}
        onEndReachedThreshold={0}
        listFooterComponent={renderFooter}
        onEndReached={() => loadMore()}
      />
    </View>
  );

加载微调器无法正确使用平面列表页脚。 有没有人遇到过这个问题,或者有没有人有解决方案?

【问题讨论】:

    标签: react-native react-native-flatlist


    【解决方案1】:

    抱歉,这是我的简单语法错误。它实际上是 ListFooterComponent 而不是 listFooterComponent。现在可以正常使用了,谢谢。

    【讨论】:

    • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
    【解决方案2】:

    调用函数而不是调用引用。它应该看起来像这样。

    ListFooterComponent={renderFooter()}
    

    【讨论】:

    • 感谢您的回答,但它似乎不起作用。我试过一次。在我的 listfooterComponent 工作中甚至没有一个文本注释。
    猜你喜欢
    • 2021-03-27
    • 2019-05-27
    • 1970-01-01
    • 2015-07-27
    • 2022-01-16
    • 1970-01-01
    • 2021-08-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多