我尝试在FlatList中显示一些获取的产品，并在到达此FlatList末尾时显示更多产品，但我收到此错误：Invariant Violation: ScrollView child layout (["alignItems"]) must be applied through the contentContainerStyle prop.
当我将alignItems从style更改为contentContainerStyle时，应用程序关闭，没有显示错误或警报。
如果我从container中删除alignItems，应用程序也会关闭

export default function NewProducts() {
  const [products, setProducts] = useState([]);
  const [isLoading, setisLoading] = useState(false);
  const [startLimit, setStartLimit] = useState({ start: 0, limit: 10 });
  const navigation = useNavigation();

  useEffect(() => {
    setisLoading(true);
    getProducts();
  }, [startLimit]);

  const gotoProduct = (id) => {
    navigation.push("product", { idProduct: id });
  };

  const getProducts = async () => {
    const response = await getLastProductsApi(
      startLimit.start,
      startLimit.limit
    );
    console.log(response);
    setProducts(response);
  };

  const renderItem = ({product}) => {
    return (
      <TouchableWithoutFeedback
        key={product.id}
        onPress={() => gotoProduct(product.id)}
      >
        <View style={styles.containerProduct}>
          <View style={styles.product}>
            <Image
              style={styles.image}
              source={{
                uri: `${product.attributes.images.data[0].attributes.formats.small.url}`,
              }}
            />
            <Text style={styles.name} numberOfLines={1} ellipsizeMode="tail">
              {product.attributes.title}
            </Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  };

  const renderFooter = () => {
    return isLoading && <Loading text="Loading more products" size="medium" />;
  };

  const handleLoadMore = () => {
    setStartLimit({
      start: startLimit.start + 10,
      limit: startLimit.limit + 10,
    });
    setisLoading(true);
  };

  return (
    <FlatList
      style={styles.container}
      numColumns={2}
      data={products}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
      ListFooterComponent={renderFooter}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "flex-start",
    marginTop: 1,
  },
  containerProduct: {
    padding: 3,
  },
  product: {
    padding: 10,
    backgroundColor: "#f0f0f0",
    borderRadius: 20,
  },
  image: {
    height: 150,
    resizeMode: "contain",
    borderRadius: 20,
  },
  name: {
    marginTop: 15,
    fontSize: 15,
  },
});

在这里我调用这个组件

export default function Home() {

  return (
    <>
      <StatusBarCustom
        backgroundColor={colors.primary}
        barStyle="light-content"
      />
      <Search />
      <View>
        <Banner />
        <NewProducts />
      </View>
    </>
  );
}