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

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

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.

Referência

Assinaturas

ts
(_props: { children: KuitoNode; }): KuitoNode

Parâmetros

NomeTipoObrigatórioDescrição
_props{ children: KuitoNode;}Sim—

Devolve

KuitoNode

Props: { children: KuitoNode;}

Props (incluindo props herdadas) 1

NomeTipoObrigatórioDescrição
childrenKuitoNodeSim—
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.