javascript - 如何在本机基础的组件框之间创建空白

Question

我有一个问题是当我使用 Native Base 框架创建一个组件框时，我无法在它们之间创建空格，我尝试使用具有属性 marginbottom 的样式表但它不起作用，那么我现在该怎么办？

import React from "react";
import { StyleSheet } from "react-native";
import {
  Box,
  Progress,
  Heading,
  Center,
  NativeBaseProvider,
} from "native-base";

export default function CategoryListItem(props) {
  const config = {
    dependencies: {
      "linear-gradient": require("expo-linear-gradient").LinearGradient,
    },
  };
  return (
    <NativeBaseProvider config={config} style={styles.container}>
      <Center flex={1}>
        <Box
          bg={{
            linearGradient: {
              colors: ["lightBlue.300", "violet.800"],
              start: [0, 0],
              end: [1, 0],
            },
          }}
          p={12}
          rounded="lg"
          _text={{
            fontSize: "md",
            fontWeight: "bold",
            color: "white",
          }}
        >
          <Center mb={8}>
            <Heading px={20}>Buy Car and buy house</Heading>
          </Center>
          <Progress value={45} mx={4} />
        </Box>
      </Center>
    </NativeBaseProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
});

标签： javascriptreact-native