React Navigation 6 Tutorial - Tab, Stack, Nested Navigators

Показать описание

In this tutorial, you will learn how react native stack, tab navigator and how navigation between screens work by implementing in TypeScript a simple e-commerce app.

React Native Navigation v6 provides a Stack Navigator (Stack Navigation) which is a way for your app to transition between screens where each new screen is placed on top of a stack.

Possibly the most common style of navigation in mobile apps is tab-based navigation (tab navigator). This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header)

Nesting navigators means rendering a navigator inside a screen of another navigator

----------------------------------------------------------

Installation:
--- expo init react-native-navigation-app --npm
--- cd react-native-navigation-app
--- npm run android
--- npm install @react-navigation/native
--- expo install react-native-screens react-native-safe-area-context
--- npm install @react-navigation/native-stack
--- npm install @react-navigation/bottom-tabs

Resources:

Рекомендации по теме

Комментарии

adam adam yemin ederim insan değil melek. thx so much bro

ejdatertas

You just solved a Typescript issue for me that was driving me crazy. Thanks!!

JonnyIrwin

this video helped me a lot. thanks for this content.

AnisurRahman-nbke

Helping me to understand RN navigation a lot Thank you sooo much !

pikka

thanks for such an excellent tutorial. I have a question about the integration of different navigations, how could I pass data from one navigation to another?

juanzapata

Hi!
Trying to code along with your video. @10:30 I get this error: "Error: Looks like you have nested a 'NavigationContainer' inside another"
FYI, I´m not using TypeScript
please help me
Thanks in advance
//Peter

plelkes

Hello, I am a senior student majoring in computer science. I am making my graduation project. My topic is React Native. I am Chinese, so it is difficult to read official English documents. I had a problem with React Navigation. It bothered me all day and I couldn't find a solution. May I ask you to help me?

kaesarliu

I'm building a mobile app right now and this helped me greatly, thank you

mattybobatty

React Navigation 6 Tutorial - Tab, Stack, Nested Navigators

React Navigation Tutorial for Beginners - Complex Navigation Flows with React Native

Getting Started with React Navigation 6 | Stack Navigator Tutorial

React Navigation v6 Tutorial for beginners | Custom Tab and custom drawer Navigators [All in 1]

Drawer Navigation in React Native | React Navigation 6.x (Beginners Tutorial)

Custom Drawer Navigator in React Navigation 6

Bottom Tab, Stack, Drawer, Top Tab Navigation | React Navigation 6 | React Native Tutorial & Pro...

REACT NATIVE Tutorial #6 - Navigating between screens

React Native Tutorial - 73 - Stack Navigation

6 - Implementing Authentication in a TikTok Clone with Supabase and React Native

React Navigation 6 Tutorial - Tab, Stack, Nested Navigators

React Native Tutorial #19 - React Navigation Setup

React Native Tutorial - 74 - Navigation between Screens

React Native tutorial #41 Button and component in Stack Navigation | React Navigation v6

React Navigation 6 | Drawer Navigator e TypeScript (Tutorial)

Learn react native navigation basics

React Native Tutorial - 78 - Drawer Navigation

#4 Stack Navigation in React Native | React Native Tutorial | React Navigation

React Navigation Tutorial for Beginners - Navigate Between Screens in React Native ( Expo )

Learn React Router v6 In 45 Minutes

Dynamic Tab Navigator | Combining Multiple Navigators | React Navigation 6

React Native tutorial #40 Style in Stack Navigation | React Navigation version 6

React Router Tutorial - 6 - Navigating Programmatically

What’s coming up with React Navigation 6?

Custom Header in React Native | React Navigation 6 | React Native Tutorial | Stack Navigation