Tabs
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen
Create a native tab bar with an independent stack for each tab. Use it for the main destinations of an app.
Keep Discover and Library in separate tabs
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
Tabs belongs inside Router and contains Tab definitions. Switching tabs preserves their screen state. Present screens outside the tabs when they should cover the tab bar.
Continue
Read Navigation for a complete workflow. See the complete prop reference for types and documented defaults.
Referenz
Signaturen
Props: { children: KuitoNode;}
Props (einschließlich geerbter Props) 1
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
children | KuitoNode | Ja | — |
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.