Grid 九宫格

主页或分类页的图标入口——3 列 / 4 列网格，每格 icon + label。

实时预览

下方渲染的就是 src/components/ui/Grid/Grid.tsx 本体，通过 react-native-web 翻译成浏览器节点。

4 列

3 列

2 列 · 大图标卡片入口

6 列 · 紧凑入口

card={false} · 嵌套已有白卡，去掉外层背景

视觉规范

元素	规则
容器	白底，圆角 12，padding 12 8
列数	3 或 4（默认 4）
单格	等宽，垂直居中 icon + label
Icon	28×28 主橙或 fg-2
Label	12px / 500 / fg-1，距 icon 6px
Badge	小红点叠在 icon 右上

用法

import { Grid } from '@unif/react-native-design';

<Grid
  columns={4}
  items={[
    { id: 'visit',   icon: 'location', label: '拜访' },
    { id: 'orders',  icon: 'cart',     label: '订单', badge: 3 },
    { id: 'sku',     icon: 'box',      label: '商品' },
    { id: 'reports', icon: 'chart',    label: '报表' },
    { id: 'msg',     icon: 'mail',     label: '消息' },
    { id: 'team',    icon: 'users',    label: '团队' },
    { id: 'settings',icon: 'settings', label: '设置' },
    { id: 'more',    icon: 'more-h',   label: '更多' },
  ]}
  onPress={(item) => navigation.push(item.id)}
/>