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

ts
export type SystemBarsProps = {
  /** The status bar's content color, visibility and, on Android, color. */
  statusBar?: StatusBarOptions;
  /** The root view's color, seen behind the app's views. */
  backgroundColor?: string;
  /** Android: drawn behind the navigation bar. */
  navigationBarColor?: string;
  /** Android: light buttons for a dark navigation bar, dark buttons for a light one. */
  navigationBarButtonStyle?: NavigationBarButtonStyle;
  /** Android: hides the navigation bar; a swipe from the edge shows it for a moment. */
  navigationBarHidden?: boolean;
  /**
   * 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.
   */
  immersive?: boolean;
  /** iOS: lets the home indicator fade out while the user doesn't touch the screen. */
  homeIndicatorAutoHidden?: boolean;
};

Membros 7

NomeTipoObrigatórioDescrição
statusBarStatusBarOptionsNãoThe status bar's content color, visibility and, on Android, color.
backgroundColorstringNãoThe root view's color, seen behind the app's views.
navigationBarColorstringNãoAndroid: drawn behind the navigation bar.
navigationBarButtonStyleNavigationBarButtonStyleNãoAndroid: light buttons for a dark navigation bar, dark buttons for a light one.
navigationBarHiddenbooleanNãoAndroid: hides the navigation bar; a swipe from the edge shows it for a moment.
immersivebooleanNãoFull 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.
homeIndicatorAutoHiddenbooleanNãoiOS: lets the home indicator fade out while the user doesn't touch the screen.
statusBar — campos aninhados

statusBar campos

NomeTipoObrigatórioDescrição
contentStatusBarContentNãoThe color of the status bar's text and icons.
hiddenbooleanNão—
animatedbooleanNãoWhether changes to content, hidden and backgroundColor animate.
transitionStatusBarTransitionNãoiOS: how showing and hiding animates, when animated.
backgroundColorstringNãoAndroid: drawn behind the status bar; a hex color.
translucentbooleanNãoAndroid: 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.