This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application
React Native Navigation
Loading...
From the course by The Hong Kong University of Science and Technology
Multiplatform Mobile App Development with React Native
оценки
The Hong Kong University of Science and Technology
оценки
Course 3 of 4 in the Specialization Full-Stack Web Development with React
From the lesson
Multiplatform Mobile App Development with React Native: An Introduction
This module introduces you to hybrid mobile application development. You will learn about React Native and explore some of the features of React Native to implement a mobile app based on the React application that was implemented in the previous course on React.
Meet the Instructors
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
A typical mobile application consists of multiple views or
multiple screens, and you need a way of navigating from one screen to another,
and then maybe even returning to a previous screen.
And these are the kind of navigation
patterns that are supported in mobile applications.
In the previous course on React,
we have seen how we make use of the React Router DOM for providing
a way of navigating among the various views of the single-page application.
That is one way of supporting navigation.
But when you look at a mobile device, a mobile device has its own typical
navigation patterns that need to be supported, and
this is where React Native Navigation comes into the picture.
Let's look at an example first and then see how React Navigation supports
the various navigational features in a mobile application.
Let's take a brief look at the version of our app that we have been working on so
far, that you will see upon completion of the exercises in this lesson.
Now, in this application, you would have multiple views or multiple pages,
or multiple screens, and you need a way of navigating among them.
And in this application,
you would see two different ways of navigating between the views.
One, we have a typical side drawer,
which allows you to navigate among the various views here.
So in the side drawer, as you can see, at this moment we have only two
different views, so you have the home page, which you see here,
being displayed here, and then you can navigate to the menu page here.
So you see here the use of the side drawer to navigate between the different views.
So drawer-based navigation is something that is very commonly seen in mobile
applications.
Not only that, when you click on an item in a list, for
example, you will go into the details of that item here.
So you see, that when you've navigated from the list to this detail,
you see the details of this being rendered here with a back
arrow rendered in the top here,
which when we click, will take us back to the list view here.
So similarly, so this is a typical pattern that you would also see, what we
see as a stack-based navigation, where as you navigate through different views,
those views that you navigate from are put into the stack and
then those views that you navigate too, are put on top of those in a stack.
And as you navigate backwards, whether you use the Back button in the status bar or
the header bar there, or a typical hardware Back button in
an Android device, you would go back to the previous view that you have seen.
So that will involve popping the current view of the stack and
then restoring the previous view from the top of the stack onto the screen.
Well, this is the typical navigation patterns that you will see in a mobile
applications, and also you might have seen many applications that used tabbed
navigations, where you have multiple tabs being shown either at the bottom or
at the top, and be able to navigate among them by selecting the appropriate tab.
We will look at tab-based navigation in an exercise in one of the later lessons.
But React Navigation that we're going to examine in this lecture,
supports all these different kinds of navigational features,
the typical mobile navigational features.
So to summarize, in this lesson, we will examine React Navigation,
which is an extensible and easy-to-use navigation solution.
It has many built-in navigators, including a stack navigator,
a drawer navigator, which I have illustrated with the example earlier,
and we also have a tab navigator, a bottom tab navigator, and
also a couple of other navigators available, a switch navigator and
also custom navigation that you can design for your specific needs.
We're going to examine the stack and drawer navigator in this lesson,
we'll look at a tab-based navigation in a later lesson.
So what we realize is that, React Navigation supports typical
navigation patterns that are seen in a mobile application, and
to make use of React Navigation in your React Native Application,
you install by saying yarn add react-navigation or
npm-install --save react-navigation, and add it to your project.
Then after, you can import that into your component and
then construct the navigations.
Again, stressing on the typical navigation patterns in a mobile application,
you might start out your mobile application with a root page,
which if you view it as a stack of views, will be at the bottom of the stack,
then maybe from this root page you navigate to a child page.
From the root page by, for example, clicking on an item in a list of items,
and then when that happens, the child page is pushed on to the top of the stack and
will remain on the top on the stack.
And similarly, you can navigate to end of the page from the child page, and
that page is also pushed onto the top of the stack, so
this is the typical stack-like navigation that you see in mobile applications.
Now, when you return to the previous view or
use the Back button to return to the previous view, then your view from
the top of the stack is popped off, and then your previous page will be restored,
or the previous screen will be restored onto the screen, and
you can continue doing this until you pop off all the different views.
So this is the typical stack navigation.
And in the React Navigation Supports stack-like navigation for
your applications, but stack navigation, you have support for transitioning between
the screens and then even provide a way of going back to the previous screen.
Now, stack navigator in React Navigation automatically adds
the Back button, so that you can navigate back to the previous screen, and
it adds the Back button to the status bar or the header bar of your application.
The stack navigator is the only one that specifically puts a header bar
into your applications view there.
And so, if you need a header bar, then you should be using that stack navigation.
And the stack navigator automatically manages your typical history,
your navigation history, so you have a way of going back to the previous view.
So this is a typical stack-like navigation that you would see, and this also
supports gestures and animations, so as you saw when you move to a child view and
back to the parent view, you saw the views being animated in and out of the screen,
and this is automatically supported by React Navigation.
And the back navigation is also tied into the Back button in your Android device, so
you can easily navigate back by clicking on the Back button of your Android device.
In addition to stack navigation, as I mentioned at the start of this
lesson, there are other navigators that are supported by React Navigation,
including drawer navigator, then you also have tab navigator and switch navigator.
We will examine drawer and tab navigators in a bit more detail.
Drawer navigation provides an automatic construction of the side drawer.
So when you design and use the drawer navigator,
just by configuring the drawer navigator, the React Navigation package automatically
adds in the side drawer with the appropriate links to the pages for you.
So you don't need to do anything explicitly in order to setup the side
drawer, it comes for the light.
And you also have the ability to customize the drawer.
We will see the customization of the drawer in
the first lesson of the next module.
Similarly, tab navigation is also supported through
the bottom tab navigation, and that provides you with multiple tabs and
be able to navigate among the tabs using the React Navigation Support.
In lot of additional features are also available in React Navigation,
you can do custom navigators if you don't
feel that the built-in navigators are sufficient to meet your needs,
you can do custom routers and even navigational views if you require.
Although this is a bit advanced, so we won't examine that in this course, but
I believe that as an exercise for you to explore on your own,
once you get comfortable with the standard navigation support in React Navigation.
[MUSIC]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
