Tutorial: Hoe navigeren in React Native applicatie

#

In deze tutorial zal ik jullie tonen hoe je kunt navigeren in een React Native applicatie. Om deze tutorial af te bakenen start ik vanuit een nieuwe Expo applicatie. Voor meer info over hoe je Expo installeert en een Expo applicatie opzet verwijs ik naar de website van Expo.

#

3 soorten navigatie

#

In React Navigation heb je 3 soorten navigatie die je kunt gebruiken.

#

Stack navigatie (1ste foto) kun je het best zien als een boek. Draai je de eerste bladzijde om kom je terecht op de 2de, enzovoort. Draai je de eerste bladzijde terug kom je terug op de 1ste.

#

Tab navigatie (2de foto) is zoals het het zelf al zegt met tabs. Deze kun je aan de onderkant van je scherm of aan de bovenkant van je scherm plaatsen.

#

Drawer navigatie (3de foto) is ook een bekende manier. Het is een hamburger menu die van de linker of rechterkant van je scherm tevoorschijn komt.

#

React navigation installeren

#

Nu we de verschillende soorten navigatie kennen kunnen we beginnen. De eerste stap die we moeten doen is React Navigation installeren dit kan via onderstaand commando uit te voeren in de terminal van je expo applicatie.

#

npm install @react-navigation/nativeCopy

#

Omdat we met Expo werken moeten we ook nog enkele dependecies installeren dat doe je met volgend commando.

#

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-viewCopy

#

Schermen

#

Vooraleer je kunt navigeren heb je uiteraard enkele schermen nodig hiervoor kun je een mapje screens aanmaken met daarin schermen. Voor deze tutorial heb ik enkele voorbeeldschermen aangemaakt alsook een global.js file met de basis opmaak onder een mapje styles.

#

home.js
about.js
settings.js
details.js

Zoals je ziet is dit telkens dezelfde file met een andere naam en text.

#

global.js

#

Stack navigatie

#

We starten met het home scherm. Om aan Stack navigatie te kunnen doen hebben we een knop nodig om van het home scherm naar een ander scherm, in dit geval het detail scherm, te kunnen gaan. Dit doe je door het Button component van React Native te importeren en er gebruik van te maken en er een onPress handler aan toe te voegen. Zo ziet onze home.js file er uit met een button.

De App.js is onze main file waarin we de navigatie tussen de verschillende schermen zullen creëren. In deze App.js file importeer je het NavigationContainer component. Dit is het component die de navigatie status bijhoudt. Alle navigatie moet tussen dit component plaatsvinden.

Daarnaast omdat we Stack navigatie willen gebruiken importeren we ook de functie createStackNavigator met de eigenschappen Navigator en Screen. Navigator om de navigatie te initialiseren en screen om de schermen te definiëren die je eerst nog moet importeren.

Met die functie kun je nu een constante aanmaken die je dan kunt gebruiken om de navigatie mee te voorzien.

De App.js file zou er nu als volgt moeten uitzien.

Als je nu je Expo app runt zie je dat als je op watch details klikt je naar het details scherm navigeert en je automatisch een terugknop hebt met de naam van je vorige scherm.

Tab navigatie

#

Om Tab navigatie in je applicatie te kunnen gebruiken importeer je net zoals voor Stack navigatie een functie. Bij Tab navigatie heb je 3 mogelijkheden createBottomTabNavigator, createMaterialBottomTabNavigator and createMaterialTopTabNavigator. Voor deze tutorial houden we het bij createBottomTabNavigator.

Nadat je de functie geïmporteerd hebt maak je er opnieuw een constante van.

De Stack navigatie steken we in een functie zodat we die binnenin onze Tab navigatie kunnen gebruiken.

Nu kunnen we de Stack navigatie binnen onze App functie gaan vervangen met de Tab navigatie. en de HomeStack functie gebruiken als een van de Tabs.

De App.js file zou er nu als volgt moeten uitzien.

Als je nu opnieuw de app runt zie je onderaan een tab balk met daarin de Home stack en de about page en kan je op die manier gaan navigeren.

#

Drawer navigatie

#

Als laatste type navigatie hebben we dan nog de Drawer navigatie deze gebruik je opnieuw op een gelijkaardige manier. Eerst de functie createDrawerNavigator importeren.

Daarna opnieuw een constante aanmaken met die functie.

Omdat we onze Tab navigatie in onze Drawer navigatie willen gebruiken maken we hier opnieuw een functie van.

Dan vervangen we de Tab navigatie in de App functie met de Drawer navigatie en gebruiken we de HomeTab functie samen met het settings scherm als de schermen.

De App.js file zou er nu als volgt moeten uitzien.

Als je de applicatie runt en je swiped van de linker kant van je scherm komt het hamburger menu tevoorschijn en kun je navigeren tussen de home tab en het settings scherm.

Alle code kun je hier terugvinden. Op de master staat de volledige code met alle navigaties samen. Daarnaast is er per type navigatie een aparte branch met die specifieke code aangemaakt.

#

referencies

#

React Navigation. (z.d.). React Navigation. Geraadpleegd op 10 februari 2021, van https://reactnavigation.org/docs/getting-started

Introduction to Expo. (z.d.). Expo Documentation. Geraadpleegd op 12 maart 2021, van https://docs.expo.io/