Stylové spodní záložky v React Native: Moderní přístup k navigaci

Vývoj mobilních aplikací v React Native přináší mnoho výzev, a jednou z nich je implementace intuitivní a vizuálně atraktivní navigace. Spodní záložky (bottom tabs) patří mezi nejpoužívanější navigační vzory, ale ne všechny implementace jsou stejně efektivní. V tomto článku se podrobně podíváme na to, proč zvolit nativní spodní záložky místo JavaScriptových alternativ, jak je správně nastavit a jak maximalizovat jejich výkon a uživatelský komfort.

Proč používat nativní spodní záložky?

Při výběru navigačního řešení máte dvě hlavní možnosti, jak implementovat navigační lištu:

• JavaScriptové záložky simulující nativní chování pomocí React komponent.
• Nativní záložky využívající vestavěné komponenty operačního systému (UIKit na iOS, Material Design na Androidu).

Lepší výkon: Není zapotřebí renderovat komponenty v JavaScriptu, a to šetří baterii a zlepšuje plynulost.

Automatický design dle platformy: iOS a Android mají odlišné konvence (např. ikony vs. textové popisky). Nativní řešení se jim snadno přizpůsobí.

Haptická odezva: Jemný vibrační feedback si snadno přidáte do navigační lišty Androidu i iOS použitím jediné vlastnosti.

Budoucí kompatibilita: Nové verze OS přidávají efekty a animace, které nativní záložky automaticky podědí.

Rozdíly mezi knihovnami pro spodní záložky

JavaScriptové spodní záložky se snaží vizuálně napodobit nativní rozhraní, zatímco skutečně nativní řešení využívá prvky přímo z dané platformy. To se projevuje nejen plynulejšími animacemi a interakcemi, ale také automatickým přizpůsobením rozhraní různým zařízením – například na tvOS a visionOS se mění na postranní panel, zatímco na iPadu zůstávají v horní části obrazovky.

Nativní implementace navíc nabízí pokročilejší funkce jako vestavěnou haptickou odezvu nebo dynamickou změnu layoutu (od iOS 18). V neposlední řadě dokáže dokonale respektovat designové jazyky jednotlivých platforem – od Materialu 3 na Androidu po systémové styly Apple.

Jak vytvořit aplikaci s React Native Bottom Tabs a Expo Routerem

Pokud začínáte nový projekt, vytvořte aplikaci v Expo pomocí standardní šablony:

npx create-expo-app nativetabs

Tato šablona už používá JavaScriptové záložky, které snadno přizpůsobíme nativnímu řešení. Při přechodu na nativní záložky tak zůstane většina kódu stejná.

Instalace knihovny

Pro začátek je potřeba knihovnu nainstalovat podle oficiálních pokynů. Jakmile je hotovo, přejděte do souboru app/(tabs)/_layout.tsx, kde nastavíte nativní spodní záložky.

-import { Tabs } from 'expo-router';
 import React from 'react';
 
 import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
+import { withLayoutContext } from "expo-router";
+import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation";
+
+export const Tabs = withLayoutContext(
+  createNativeBottomTabNavigator().Navigator
+);

Jak nastavit ikony?

Pro jednoduchost použijeme ikonové obrázky z internetu, ale pro většinu aplikací a lepší výkon doporučujeme uložit ikony do adresáře assets.

Hlavní rozdíl oproti JavaScriptové navigaci je v přístupu k ikonám:

• JavaScriptové řešení přijímá přímo React Native komponenty.
• U nativního přístupu je nutné použít přímé soubory (např. .png, .jpg, .svg) nebo vzdálené URL obrázku.

Aplikaci nyní můžete spustit – nativní spodní záložky jsou připraveny!

Ukázka výsledku v praxi:

Rychlý start s Native Tabs

Pokud chcete rovnou vyzkoušet aplikaci využívající Native Tabs, můžete použít připravenou šablonu:

npx create-expo-app@latest NativeTabs --template @bottom-tabs/expo-template

Tímto způsobem získáte plně funkční aplikaci se spodní navigací připravenou k dalším úpravam.

Co nás čeká v budoucnu?

Tato knihovna má před sebou slibný vývoj a už teď se plánují další vylepšení:

S dalším rozšiřováním API parity s JavaScriptovými záložkami se plánuje přidání nativních záhlaví (Native Headers). Díky tomu nebude v některých záložkách nutné používat stack navigaci, protože bude možné využít vestavěná záhlaví přímo z bottom-tabs.

Také určitě počítejte s lepší optimalizací pro nové verze iOS a Androidu.

Tento článek vychází z oficiálních zdrojů Expo. Podrobnější informace najdete v originálním článku.

Pokud plánujete vývoj mobilní aplikace a hledáte efektivní řešení, rádi vám s tím pomůžeme! Pojďme společně probrat vaše nápady a najít nejlepší cestu k jejich realizaci. Napište nám!