隐藏 FlatList 页脚

Question

我正在使用平面列表显示购物车中的商品。当购物车为空时，我正在使用 ListEmptyComponent 来显示空购物车消息。当我的 FlatList 为空时，如何隐藏我的 ListFooterComponent？

  return (
    <View style={styles.mainscreen}>
      <View style={styles.cartScreen}>
        <FlatList
          data={cartItems}
          keyExtractor={(item) => item.productId}
          renderItem={(itemData) => (
            <CartItem
              quantity={itemData.item.quantity}
              title={itemData.item.productTitle}
              amount={itemData.item.sum}
              onRemove={() => {
                dispatch(cartActions.removeFromCart(itemData.item.productId));
              }}
            />
          )}
          ListEmptyComponent={() => (
            <Animatable.View
              style={styles.emptyCart}
              animation="bounceIn"
              easing="ease-in">
              <Image
                style={styles.emptyCartImg}
                source={{
                  uri: 'https://i.imgur.com/kgKJc5q.png',
                }}
              />
              <Text style={styles.emptyCartHeader}>Your Cart is Empty!</Text>
              <Text style={styles.emptyCartTxt}>
                Looks like you haven't added anything yet.
              </Text>
            </Animatable.View>
          )}
          ListFooterComponent={() => (
            <View style={styles.footerCart}>
              <Text style={styles.summaryText}>Taxes : </Text>
              <Text style={styles.summaryText}>Delivery Charges :</Text>
            </View>
          )}
        />

Answer 1

如果数组中有如下数据，您可以在列表空组件中放置一个条件来渲染

      ListFooterComponent={() =>
        cartItems.length > 0 && (
          <View style={styles.footerCart}>
            <Text style={styles.summaryText}>Taxes : </Text>
            <Text style={styles.summaryText}>Delivery Charges :</Text>
          </View>
        )
      }

隐藏 FlatList 页脚

Hide FlatList Footer

react-native

react-native-flatlist