RouteProps — Kuito Dokumentation

Verwendung

Give a tab a title and platform icon

Dieser Typ wird verwendet von 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>
  );
}

Typdeklaration

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;
}

Mitglieder 10

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

screen — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`props`	`ScreenProps<P, R>`	Ja	—

Rückgabe

KuitoNode

systemBars — verschachtelte Felder

systemBars Felder

Name	Typ	Erforderlich	Beschreibung
`statusBar`	`StatusBarOptions`	Nein	The status bar's content color, visibility and, on Android, color.
`backgroundColor`	`string`	Nein	The root view's color, seen behind the app's views.
`navigationBarColor`	`string`	Nein	Android: drawn behind the navigation bar.
`navigationBarButtonStyle`	`NavigationBarButtonStyle`	Nein	Android: light buttons for a dark navigation bar, dark buttons for a light one.
`navigationBarHidden`	`boolean`	Nein	Android: hides the navigation bar; a swipe from the edge shows it for a moment.
`immersive`	`boolean`	Nein	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`	Nein	iOS: lets the home indicator fade out while the user doesn't touch the screen.

statusBar — verschachtelte Felder

statusBar Felder

Name	Typ	Erforderlich	Beschreibung
`content`	`StatusBarContent`	Nein	The color of the status bar's text and icons.
`hidden`	`boolean`	Nein	—
`animated`	`boolean`	Nein	Whether changes to content, hidden and backgroundColor animate.
`transition`	`StatusBarTransition`	Nein	iOS: how showing and hiding animates, when animated.
`backgroundColor`	`string`	Nein	Android: drawn behind the status bar; a hex color.
`translucent`	`boolean`	Nein	Android: false lays the app out below the status bar instead of under it.

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.