Configure one destination in a native tab bar. Use it for a section such as Library or Settings.

Give a tab a title and platform icon

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

Behavior

Place Tab inside Tabs and put its routes inside it. Use stable names and meaningful accessible titles. Supply the appropriate icon name for each platform.

Continue

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

Referenz

Signaturen

ts
(_props: TabProps): KuitoNode

Parameter

NameTypErforderlichBeschreibung
_propsTabPropsJa—

Rückgabe

KuitoNode

Props: TabProps

Props (einschließlich geerbter Props) 4

NameTypErforderlichBeschreibung
namestringJa—
titlestringJa—
iconTabIconNeinThe platform's symbol name: an SF Symbol on iOS, a Material Symbol on Android. { ios, android } names one per platform; { uri } is any image (docs/navigation.md).
childrenKuitoNodeJa—
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.