Wrapper 包装/容器

页面包装器

使用 Wrapper 包裹自动针对头和底部的安全区域进行计算

import { Wrapper } from "@finalx/components";

function Index({ children }) {
  return (
    <Wrapper
      space={false}
      bottomSpace={false}
      //   style={{
      //     position: 'relative',
      //     paddingBottom: '280rpx',
      //     backgroundColor: '#f8ecd6',
      //     minHeight: '100vh',
      //     boxSizing: 'border-box',
      //   }}
    >
      <View>...</View>
    </Wrapper>
  );
}

页面包装器组件属性

属性名	类型	默认值	必填	描述
space	boolean	true	否	开启顶部安全区域距离
bottomSpace	boolean	false	否	开启低部安全区域距离
bgColor	color	-	否	背景色
style	CSSProperties	-	否	自定义根组件样式

底部包装器

使用 BottomWrapper 包裹底部自动识别底部安全区域

import { Wrapper } from "@finalx/components";

function Index({ children }) {
  return (
    <BottomWrapper
      style={{
        width: "100vw",
        height: "380rpx",
        backgroundColor: "#FFF9EE",
        borderRadius: "32rpx 32rpx 0 0",
        boxSizing: "border-box"
      }}
    >
      <View>...</View>
    </BottomWrapper>
  );
}

底部包装器组件属性

属性名	类型	默认值	必填	描述
height	number｜string	106rpx	否	高度样式
style	CSSProperties	-	否	自定义内容样式
wrapperStyle	CSSProperties	-	否	自定义包装器样式