kuito.
Loslegen

SystemBars

Komponente
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen

Set system bar appearance while a view is active. Use it for a dark gallery or a screen that draws behind system UI.

Use light system controls over a dark screen

tsx
import { SystemBars, Text, VStack } from 'kuito';

export default function Gallery() {
  return (
    <>
      <SystemBars
        statusBar={{ content: 'light' }}
        backgroundColor="#101014"
        navigationBarColor="#101014"
        navigationBarButtonStyle="light"
      />
      <VStack flex={1} backgroundColor="#101014">
        <Text color="#ffffff">Photos</Text>
      </VStack>
    </>
  );
}

Behavior

Status bar content style names the foreground color. Use SafeArea for content spacing; SystemBars sets appearance. Android navigation bar settings apply to its system navigation controls.

Continue

Read Window for a complete workflow. See the complete prop reference for types and documented defaults.

Referenz

Signaturen

ts
(props: SystemBarsProps): KuitoNode

Parameter

NameTypErforderlichBeschreibung
propsSystemBarsPropsJa—

Rückgabe

KuitoNode

Props: SystemBarsProps

Props (einschließlich geerbter Props) 7

NameTypErforderlichBeschreibung
statusBarStatusBarOptionsNeinThe status bar's content color, visibility and, on Android, color.
backgroundColorstringNeinThe root view's color, seen behind the app's views.
navigationBarColorstringNeinAndroid: drawn behind the navigation bar.
navigationBarButtonStyleNavigationBarButtonStyleNeinAndroid: light buttons for a dark navigation bar, dark buttons for a light one.
navigationBarHiddenbooleanNeinAndroid: hides the navigation bar; a swipe from the edge shows it for a moment.
immersivebooleanNeinFull 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.
homeIndicatorAutoHiddenbooleanNeiniOS: lets the home indicator fade out while the user doesn't touch the screen.
statusBar — verschachtelte Felder

statusBar Felder

NameTypErforderlichBeschreibung
contentStatusBarContentNeinThe color of the status bar's text and icons.
hiddenbooleanNein—
animatedbooleanNeinWhether changes to content, hidden and backgroundColor animate.
transitionStatusBarTransitionNeiniOS: how showing and hiding animates, when animated.
backgroundColorstringNeinAndroid: drawn behind the status bar; a hex color.
translucentbooleanNeinAndroid: 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.