RouteProps — Kuito Documentação

Utilização

Give a tab a title and platform icon

Este tipo é usado por Route

tsx

import { Route, Router, Tab, Tabs, Text } from 'kuito';

function Discover() {
  return <Text padding={16}>Discover</Text>;
}

function Library() {
  return <Text padding={16}>Library</Text>;
}

export default function App() {
  return (
    <Router>
      <Tabs>
        <Tab name="discover" title="Discover" icon={{ ios: 'safari', android: 'explore' }}>
          <Route name="index" path="/" screen={Discover} title="Discover" />
        </Tab>
        <Tab
          name="library"
          title="Library"
          icon={{ ios: 'books.vertical', android: 'library_music' }}
        >
          <Route name="library" path="/library" screen={Library} title="Library" />
        </Tab>
      </Tabs>
    </Router>
  );
}

Declaração do tipo

export interface RouteProps<P extends object = {}, R = undefined> {
  /** Its key in `routes`. */
  name: string;
  /** Segments, `:name` params and a final `*name`: what a deep link's path matches. */
  path: string;
  /** How a link's text parses into each param; a path param left out is a string. */
  params?: { [K in keyof P]?: ParamType };
  screen: Component<ScreenProps<P, R>>;
  /** The native header's title. */
  title?: string | ((params: P) => string);
  presentation?: Presentation;
  /** The screen's color, under the bars too; the platform's background without. */
  backgroundColor?: string;
  /** A sheet route's heights, as `<Sheet snapPoints>` takes them; the platform's default without. */
  snapPoints?: readonly SnapPoint[];
  /** The native header: false hides it; its items, large title and search otherwise (docs/navigation.md#headers). */
  header?: false | ScreenHeader | ((params: P) => false | ScreenHeader);
  /** The system bars while this screen is focused, as a `<SystemBars>`'s props (docs/system-ui.md). */
  systemBars?: SystemBarsProps;
}

Membros 10

Nome	Tipo	Obrigatório	Descrição
`name`	`string`	Sim	Its key in `routes`.
`path`	`string`	Sim	Segments, `:name` params and a final `*name`: what a deep link's path matches.
`params`	`{ [K in keyof P]?: ParamType; }`	Não	How a link's text parses into each param; a path param left out is a string.
`screen`	`Component<ScreenProps<P, R>>`	Sim	—
`title`	`string \| ((params: P) => string)`	Não	The native header's title.
`presentation`	`Presentation`	Não	—
`backgroundColor`	`string`	Não	The screen's color, under the bars too; the platform's background without.
`snapPoints`	`readonly SnapPoint[]`	Não	A sheet route's heights, as `<Sheet snapPoints>` takes them; the platform's default without.
`header`	`false \| ScreenHeader \| ((params: P) => false \| ScreenHeader)`	Não	The native header: false hides it; its items, large title and search otherwise (docs/navigation.md#headers).
`systemBars`	`SystemBarsProps`	Não	The system bars while this screen is focused, as a `<SystemBars>`'s props (docs/system-ui.md).

screen — assinaturas de método

Assinaturas

(props: ScreenProps<P, R>): KuitoNode

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`props`	`ScreenProps<P, R>`	Sim	—

Devolve

KuitoNode

systemBars — campos aninhados

systemBars campos

Nome	Tipo	Obrigatório	Descrição
`statusBar`	`StatusBarOptions`	Não	The status bar's content color, visibility and, on Android, color.
`backgroundColor`	`string`	Não	The root view's color, seen behind the app's views.
`navigationBarColor`	`string`	Não	Android: drawn behind the navigation bar.
`navigationBarButtonStyle`	`NavigationBarButtonStyle`	Não	Android: light buttons for a dark navigation bar, dark buttons for a light one.
`navigationBarHidden`	`boolean`	Não	Android: hides the navigation bar; a swipe from the edge shows it for a moment.
`immersive`	`boolean`	Não	Full screen: hides the status bar, the navigation bar and the home indicator, and on iOS edge swipes reach the app first. The entry's own props, and later entries, win over what it hides.
`homeIndicatorAutoHidden`	`boolean`	Não	iOS: lets the home indicator fade out while the user doesn't touch the screen.

statusBar — campos aninhados

statusBar campos

Nome	Tipo	Obrigatório	Descrição
`content`	`StatusBarContent`	Não	The color of the status bar's text and icons.
`hidden`	`boolean`	Não	—
`animated`	`boolean`	Não	Whether changes to content, hidden and backgroundColor animate.
`transition`	`StatusBarTransition`	Não	iOS: how showing and hiding animates, when animated.
`backgroundColor`	`string`	Não	Android: drawn behind the status bar; a hex color.
`translucent`	`boolean`	Não	Android: false lays the app out below the status bar instead of under it.

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.