RouteProps — Kuito Documentation

Utilisation

Give a tab a title and platform icon

Ce type est utilisé par 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>
  );
}

Déclaration du type

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

Membres 10

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

screen — signatures de méthode

Signatures

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

Paramètres

Nom	Type	Requis	Description
`props`	`ScreenProps<P, R>`	Oui	—

Retourne

KuitoNode

systemBars — champs imbriqués

systemBars champs

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

statusBar — champs imbriqués

statusBar champs

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

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.