In a web browser, you can link to different pages using the
<a> anchor tag. When the user clicks on the link, the URL is pushed onto the browser history stack. When the user clicks the back button, the browser pops the item off the top of the history stack, so the previously visited page is now the active page. React Native doesn't have a built-in view of the global history stack like the web browser - this is where React Navigation comes in.
The stack navigator in React Navigation allows your app to navigate between screens and manage navigation history. If your application uses only one stack navigator, then this is conceptually similar to how a web browser handles navigation state - your application pops items off the navigation stack as users interact with it, and this results in the user seeing different screens. The key difference between how this works in a web browser and in React Navigation is that the React Navigation stack navigator provides the gestures and animations you expect from Android and iOS when navigating between routes in the stack.
Let's start by demonstrating the most common
The libraries we've installed so far are the building blocks and common frameworks for navigators, and each navigator in React Navigation lives in its own library. To use the stack navigator, we need to set @response-navigation/stack:
createStackNavigator is a function that returns an object containing 2 properties:
Navigator. Both are React components used to customize the navigator. The
Navigator must contain the
Screen elements as its children to define the route configuration.
NavigationContainer is the component that manages our navigation tree and contains the navigation state. This component should wrap the entire navigator structure. We usually render this component at the root of our application, which is usually a component exported from
If you run this code, you will see a screen with an empty navigation bar and a gray content area containing your
HomeScreen component (shown above). The styles you see for the navigation bar and content area are the default configuration for the stack navigator, we will learn how to customize them later.
The case of the route name is irrelevant - you can use lowercase
home or capitalized
Home, the choice is yours. We prefer to capitalize route names.
The only required configuration for the screen is the
component properties of the
props. You can learn more about the other options available in the Stack Navigator Reference.
Thanks goes to these wonderful people (emoji key):