Skyroc Native UI

Space

在一组子元素之间插入统一间距

间距（Space）是一个只管排布的容器：把子元素横向或纵向排开，并在它们之间插入统一的 gap。相比手写 flex-row gap-3，它多了预设档位、自定义数值、分隔符与换行控制。

import { Space } from '@skyroc/native-ui';

水平方向

默认横向排列，间距为 md。

SpaceHorizontal.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceHorizontal = () => {
  return (
    <View className="bg-background p-4">
      <Space>
        <View className="size-12 items-center justify-center rounded-xl bg-primary/10">
          <Text className="font-semibold text-primary">1</Text>
        </View>
        <View className="size-12 items-center justify-center rounded-xl bg-success/10">
          <Text className="font-semibold text-success">2</Text>
        </View>
        <View className="size-12 items-center justify-center rounded-xl bg-warning/10">
          <Text className="font-semibold text-warning">3</Text>
        </View>
      </Space>
    </View>
  );
};

export { SpaceHorizontal };

何时使用

  • 一排按钮、一列表单项这类需要统一间距的场景。
  • 需要按列宽等分或多行栅格时用 Grid；只是一条分隔线用 Divider。

垂直方向

direction="vertical" 让子元素纵向排列。

SpaceVertical.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceVertical = () => {
  return (
    <View className="bg-background p-4">
      <Space
        direction="vertical"
        fill
      >
        <View className="h-11 justify-center rounded-xl bg-primary/10 px-4">
          <Text className="font-medium text-primary">第一项</Text>
        </View>
        <View className="h-11 justify-center rounded-xl bg-success/10 px-4">
          <Text className="font-medium text-success">第二项</Text>
        </View>
        <View className="h-11 justify-center rounded-xl bg-warning/10 px-4">
          <Text className="font-medium text-warning">第三项</Text>
        </View>
      </Space>
    </View>
  );
};

export { SpaceVertical };

预设间距

size间距size间距
xs4lg16
sm8xl24
md122xl32
SpaceSize.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;

const SpaceSize = () => {
  return (
    <View className="bg-background p-4">
      <Space
        direction="vertical"
        fill
        size="lg"
      >
        {SIZES.map(size => (
          <View key={size}>
            <Text className="mb-2 text-xs text-muted-foreground">{size === 'md' ? 'md（默认）' : size}</Text>
            <Space size={size}>
              <View className="size-9 rounded-lg bg-primary/15" />
              <View className="size-9 rounded-lg bg-primary/30" />
              <View className="size-9 rounded-lg bg-primary/50" />
            </Space>
          </View>
        ))}
      </Space>
    </View>
  );
};

export { SpaceSize };

自定义间距

size 传数值（单位 dp）时走内联 style 的 gap。此时组件不会再输出 gap-* 类名 —— RN 中 style 优先于类名，两套并存会互相竞争。

SpaceCustomSize.tsx
Loading…
import { Space } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceCustomSize = () => {
  return (
    <View className="bg-background p-4">
      <Space size={20}>
        <View className="size-12 rounded-xl bg-info/15" />
        <View className="size-12 rounded-xl bg-info/30" />
        <View className="size-12 rounded-xl bg-info/50" />
      </Space>
    </View>
  );
};

export { SpaceCustomSize };

对齐方式

align 控制交叉轴对齐：start / center / end / baseline。

SpaceAlign.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceAlign = () => {
  return (
    <View className="bg-background p-4">
      <Space
        direction="vertical"
        fill
        size="lg"
      >
        <View>
          <Text className="mb-2 text-xs text-muted-foreground">start</Text>
          <Space align="start">
            <View className="h-8 w-12 rounded-lg bg-primary/20" />
            <View className="h-12 w-12 rounded-lg bg-primary/35" />
            <View className="h-16 w-12 rounded-lg bg-primary/50" />
          </Space>
        </View>
        <View>
          <Text className="mb-2 text-xs text-muted-foreground">center</Text>
          <Space align="center">
            <View className="h-8 w-12 rounded-lg bg-success/20" />
            <View className="h-12 w-12 rounded-lg bg-success/35" />
            <View className="h-16 w-12 rounded-lg bg-success/50" />
          </Space>
        </View>
        <View>
          <Text className="mb-2 text-xs text-muted-foreground">end</Text>
          <Space align="end">
            <View className="h-8 w-12 rounded-lg bg-warning/20" />
            <View className="h-12 w-12 rounded-lg bg-warning/35" />
            <View className="h-16 w-12 rounded-lg bg-warning/50" />
          </Space>
        </View>
        <View>
          <Text className="mb-2 text-xs text-muted-foreground">baseline</Text>
          <Space align="baseline">
            <Text size="xs">Extra small</Text>
            <Text size="lg">Large</Text>
            <Text size="2xl">2XL</Text>
          </Space>
        </View>
      </Space>
    </View>
  );
};

export { SpaceAlign };

自动换行

wrap 仅在 direction="horizontal" 时生效 —— 纵向排列换行没有意义，组件不会输出任何类名。

SpaceWrap.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceWrap = () => {
  return (
    <View className="bg-background p-4">
      <Space wrap>
        {Array.from({ length: 10 }, (_, index) => (
          <View
            className="size-11 items-center justify-center rounded-xl bg-primary/10"
            key={index}
          >
            <Text className="text-sm font-medium text-primary">{index + 1}</Text>
          </View>
        ))}
      </Space>
    </View>
  );
};

export { SpaceWrap };

分隔符

split 在相邻子元素之间插入节点，例如一条竖向 Divider。

SpaceSplit.tsx
Loading…
import { Divider, Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceSplit = () => {
  return (
    <View className="bg-background p-4">
      <Space
        direction="vertical"
        fill
        size="lg"
      >
        <View>
          <Text className="mb-3 text-xs text-muted-foreground">水平排列配合竖向分隔线</Text>
          <Space
            size="sm"
            split={<Divider orientation="vertical" />}
          >
            <Text className="text-sm">编辑</Text>
            <Text className="text-sm">复制</Text>
            <Text className="text-sm text-destructive">删除</Text>
          </Space>
        </View>

        <View>
          <Text className="mb-3 text-xs text-muted-foreground">垂直排列配合横向分隔线</Text>
          <Space
            direction="vertical"
            fill
            size="sm"
            split={<Divider />}
          >
            <Text className="text-sm">第一行</Text>
            <Text className="text-sm">第二行</Text>
            <Text className="text-sm">第三行</Text>
          </Space>
        </View>

        <View>
          <Text className="mb-3 text-xs text-muted-foreground">size=0 时，间距完全由分隔符承担</Text>
          <Space
            size={0}
            split={
              <Divider
                className="mx-3"
                orientation="vertical"
              />
            }
          >
            <Text className="text-sm">编辑</Text>
            <Text className="text-sm">复制</Text>
            <Text className="text-sm text-destructive">删除</Text>
          </Space>
        </View>
      </Space>
    </View>
  );
};

export { SpaceSplit };

分隔符本身也是 flex 子项，两侧各占一份 gap —— 相邻子元素的实际间距是 2 × size + 分隔符尺寸，而不是 size。

撑满容器

fill 让 Space 占满父元素宽度（两个方向都是 w-full）。纵向 Space 要的也是列本身占满宽度；用 h-full 会让百分比高度去解析 auto 高度的父容器，布局直接塌掉。

SpaceFill.tsx
Loading…
import { Space, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const SpaceFill = () => {
  return (
    <View className="bg-background p-4">
      <Space fill>
        <View className="flex-1 items-center justify-center rounded-xl bg-primary/10 py-3">
          <Text className="text-sm font-medium text-primary">左侧</Text>
        </View>
        <View className="flex-1 items-center justify-center rounded-xl bg-success/10 py-3">
          <Text className="text-sm font-medium text-success">右侧</Text>
        </View>
      </Space>
    </View>
  );
};

export { SpaceFill };

API

Space

除下表外，Space 透传 View 的属性（style、testID 等）。

属性说明类型默认值
children*子元素ReactNode-
direction间距方向'horizontal' | 'vertical''horizontal'
size间距大小，预设档位或自定义数值（dp）；传数值时走内联 style'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number'md'
align子元素在交叉轴上的对齐方式'start' | 'center' | 'end' | 'baseline'-
wrap是否自动换行，仅 direction="horizontal" 时生效boolean-
split子元素之间的分隔符；它也占 gap，实际间距为 2 × size + 分隔符尺寸ReactNode-
fill是否撑满父元素宽度boolean-
className容器类名，合并到变体样式之后string-
ref底层 View 的 ref，用于 measure / 滚动定位Ref<View>-

类型

import type { SpaceAlign, SpaceDirection, SpaceProps, SpaceSize } from '@skyroc/native-ui';

SpaceDirection

间距方向。

'horizontal' | 'vertical'

SpaceSize

间距大小的预设档位；size 还接受任意数值（dp）。

'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

SpaceAlign

交叉轴对齐方式。

'start' | 'center' | 'end' | 'baseline'

包内还导出了 spaceVariants。注意它的 size 没有默认值：直接调用不会得到任何 gap-*，默认档位由 Space 组件传入 —— 自定义数值间距要走内联 style，变体里若有默认类名会与之竞争。

Image

基于 expo-image 的图片组件，内置加载中与加载失败占位

Grid

宫格容器，用等宽格子铺排图标入口与快捷功能