• Co to jest React Navigation?
• Dlaczego warto używać React Navigation?
• Instalacja React Navigation
• Tworzenie nawigatora stosu
• Nawigacja między ekranami
• Nawigacja do tej samej trasy wielokrotnie
• Powrót do poprzedniego ekranu
• Podsumowanie

Co to jest React Navigation?

React Navigation jest to biblioteka JavaScript, która umożliwia łatwe i efektywne zarządzanie nawigacją i przejściami między ekranami w aplikacjach mobilnych stworzonych za pomocą React Native. Jest to jedno z najważniejszych narzędzi dla każdego dewelopera React Native, umożliwiające tworzenie złożonych hierarchii nawigacyjnych i przejść między ekranami.

Sprawdź także:

• Zarządzanie Stanem w React Native: Redux, Mobx i inne Rozwiązania
• Optymalizacja Wydajności w Aplikacjach React Native: Praktyczne Porady

Dlaczego warto używać React Navigation?

React Navigation oferuje wiele zalet, które sprawiają, że jest to idealne rozwiązanie dla każdego, kto chce stworzyć aplikację mobilną z React Native. Oto niektóre z nich:

1. Łatwość użycia: React Navigation zostało zaprojektowane z myślą o łatwości użycia. Dzięki temu, nawet jeśli jesteś nowy w React Native, szybko nauczysz się, jak korzystać z React Navigation.
2. Wszechstronność: React Navigation umożliwia tworzenie różnorodnych schematów nawigacyjnych, od prostych stosów po skomplikowane tabele i szuflady.
3. Dostosowywalność: Każdy aspekt React Navigation jest w pełni dostosowywalny, co pozwala tworzyć unikalne i spersonalizowane interfejsy użytkownika.
4. Integracja z innymi bibliotekami React Native: React Navigation dobrze integruje się z innymi bibliotekami React Native, takimi jak Redux, MobX i inne.

Instalacja React Navigation

Zanim zaczniemy korzystać z React Navigation, musimy najpierw zainstalować kilka pakietów. Poniżej przedstawiamy kroki, które musisz podjąć, aby prawidłowo zainstalować i skonfigurować React Navigation w twoim projekcie React Native.

Instalacja pakietów

npm install @react-navigation/native @react-navigation/native-stack

Instalacja zależności

Następnie musisz zainstalować wymagane zależności. Komendy, które musisz użyć, zależą od tego, czy twój projekt jest zarządzany przez Expo czy jest to czysty projekt React Native.

Jeśli masz projekt zarządzany przez Expo, zainstaluj zależności za pomocą expo:

npx expo install react-native-screens react-native-safe-area-context

Jeśli masz czysty projekt React Native, zainstaluj zależności za pomocą npm:

npm install react-native-screens react-native-safe-area-context

Dla iOS z czystym projektem React Native, upewnij się, że masz zainstalowane CocoaPods https://cocoapods.org/. Następnie zainstaluj pods, aby ukończyć instalację:

cd iospod installcd ..

Konfiguracja nawigatora

Po zainstalowaniu wymaganych pakietów i zależności, musimy skonfigurować nasz nawigator. Zazwyczaj robimy to w naszym pliku wejściowym, takim jak index.js lub App.js:

import * as React from 'react';import {NavigationContainer} from '@react-navigation/native';const App = () => {  return (    <NavigationContainer>      {/* Reszta kodu twojej aplikacji */}    </NavigationContainer>  );};export default App;

Tworzenie nawigatora stosu

Nawigator stosu jest jednym z najczęściej używanych typów nawigatorów w React Navigation. Umożliwia on nawigację między różnymi ekranami poprzez stosowanie ich jeden na drugim. Poniżej znajduje się przykładowy kod, który pokazuje, jak stworzyć nawigator stosu z dwoma ekranami (Home i Details):

import * as React from 'react';import {NavigationContainer} from '@react-navigation/native';import {createNativeStackNavigator} from '@react-navigation/native-stack';const Stack = createNativeStackNavigator();const MyStack = () => {  return (    <NavigationContainer>      <Stack.Navigator>        <Stack.Screen name="Home" component={HomeScreen} />        <Stack.Screen name="Details" component={DetailsScreen} />      </Stack.Navigator>    </NavigationContainer>  );};export default MyStack;

Nawigacja między ekranami

Teraz, gdy mamy skonfigurowany nasz nawigator, możemy zacząć nawigować między różnymi ekranami. Aby to zrobić, używamy funkcji navigation.navigate(), do której przekazujemy nazwę trasy, do której chcemy przenieść użytkownika.

Poniżej znajduje się przykładowy kod, który pokazuje, jak przekazać użytkownika z ekranu Home do ekranu Details:

function HomeScreen({ navigation }) {  return (    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>      <Text>Home Screen</Text>      <Button        title="Go to Details"        onPress={() => navigation.navigate('Details')}      />    </View>  );}

Nawigacja do tej samej trasy wielokrotnie

Czasem możemy chcieć nawigować do tej samej trasy wielokrotnie. Na przykład, możemy chcieć otworzyć kolejny ekran Details na wierzchu stosu. Aby to zrobić, zamiast używać navigation.navigate(), możemy użyć navigation.push():

function DetailsScreen({ navigation }) {  return (    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>      <Text>Details Screen</Text>      <Button        title="Go to Details... again"        onPress={() => navigation.push('Details')}      />    </View>  );}

Powrót do poprzedniego ekranu

Czasami będziemy chcieli powrócić do poprzedniego ekranu. Możemy to zrobić za pomocą funkcji navigation.goBack():

function DetailsScreen({ navigation }) {  return (    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>      <Text>Details Screen</Text>      <Button        title="Go back"        onPress={() => navigation.goBack()}      />    </View>  );}

Podsumowanie

React Navigation jest potężnym narzędziem, które pozwala tworzyć złożone schematy nawigacyjne w twojej aplikacji React Native. Dzięki jego łatwości użycia i wszechstronności, jest to idealne rozwiązanie dla każdego, kto chce stworzyć aplikację mobilną z React Native. Pamiętaj, aby zawsze dokładnie przetestować swoją nawigację, aby upewnić się, że działa ona tak, jak oczekujesz.

Artykuł Wprowadzenie do React Navigation pochodzi z serwisu TheForceCode - centrum wiedzy.

• Czym jest Vue Router?
• Instalacja Vue Router
• Konfiguracja Vue Router
• Nawigacja z Vue Router
• Dynamiczny routing
• Nawigacja programistyczna
• Kontrola nawigacji
• Historia nawigacji
• Podsumowanie

Czym jest Vue Router?

Vue Router to oficjalna biblioteka routingu dla Vue.js. Umożliwia ona mapowanie komponentów na określone ścieżki URL, co pozwala na dynamiczne renderowanie różnych widoków bez konieczności przeładowania strony.

const router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes: [    { path: '/', component: Home },    { path: '/about', component: About },  ],})

Jak widać powyżej, ścieżki są mapowane na komponenty przy użyciu tablicy routes, która jest przekazywana do instancji routera podczas jej tworzenia.

• Zobacz także: Podstawy Vue – tworzenie interaktywnych interfejsów
• Animacje w Vue.js: Efekty dla Interfejsu Użytkownika

Instalacja Vue Router

Instalacja Vue Router jest prosta i szybka. Można go zainstalować za pomocą menedżera pakietów npm lub yarn, wykonując następujące polecenie:

npm install vue-router@4# lubyarn add vue-router@4

Konfiguracja Vue Router

Po zainstalowaniu Vue Router, musimy go skonfigurować w naszej aplikacji. Poniżej znajduje się przykładowy kod konfiguracji routera:

// 1. Definiowanie komponentów, które będą używane jako widokiconst Home = { template: '<div>Strona główna</div>' }const About = { template: '<div>O nas</div>' }// 2. Definiowanie ścieżekconst routes = [  { path: '/', component: Home },  { path: '/about', component: About }]// 3. Tworzenie instancji routeraconst router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes})// 4. Dodanie routera do aplikacji Vueconst app = Vue.createApp({})app.use(router)app.mount('#app')

Nawigacja z Vue Router

Vue Router udostępnia komponent router-link, który umożliwia tworzenie linków nawigacyjnych. Aby wygenerować link, wystarczy przekazać ścieżkę do atrybutu to:

<router-link to="/">Strona główna</router-link><router-link to="/about">O nas</router-link>

Dynamiczny routing

Dynamiczny routing to potężny koncept, który pozwala na tworzenie bardziej złożonych ścieżek. Jest to szczególnie przydatne, gdy chcemy wyświetlać różne widoki w zależności od określonego parametru w URL.

const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  { path: '/user/:id', component: User },]

W powyższym przykładzie, :id to dynamiczny segment ścieżki, który może przyjmować różne wartości. Komponent User będzie renderowany dla każdej ścieżki pasującej do wzorca /user/:id.

Nawigacja programistyczna

Oprócz nawigacji za pomocą linków, Vue Router umożliwia również nawigację programistyczną. Możemy to zrobić za pomocą metody push dostępnej na instancji routera:

router.push('/about')

Kontrola nawigacji

Vue Router umożliwia precyzyjną kontrolę nad nawigacją za pomocą tzw. strażników nawigacji (navigation guards). Strażniki nawigacji to funkcje, które są wywoływane przed wejściem na daną trasę, co pozwala na wykonywanie dodatkowej logiki, takiej jak sprawdzanie czy użytkownik jest zalogowany.

router.beforeEach((to, from, next) => {  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })  else next()})

Historia nawigacji

Vue Router obsługuje trzy tryby historii: HTML5, hash i memory. Tryb HTML5 wykorzystuje History API do manipulacji historią przeglądarki, hash korzysta z fragmentów URL, a memory przechowuje historię w pamięci i nie wpływa na URL.

Podsumowanie

Vue Router to potężne narzędzie, które umożliwia tworzenie skomplikowanych systemów routingu w aplikacjach Vue.js. Dzięki jego elastycznemu API, możliwości są niemal nieograniczone. Czy to prosty system routingu, czy zaawansowany system z dynamicznym routingiem, kontrolą nawigacji i różnymi trybami historii – Vue Router jest gotowy na wszystko.

Artykuł Routing w Vue.js – przewodnik po Vue Router pochodzi z serwisu TheForceCode - centrum wiedzy.