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
Exercise (Video): Network Info
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Multiplatform Mobile App Development with React Native
個評分
The Hong Kong University of Science and Technology
個評分
課程 3（共 4 門，Specialization Full-Stack Web Development with React）
從本節課中
Accessing Native Capabilities of Devices: The Expo SDK
In this module you will explore the Expo SDK that enables you to access the native capabilities of the mobile devices. You will use a few SDK APIs in order to understand the general concepts and the patterns for using these APIs within your React Native application
與講師見面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
In this exercise, we're going to use the NetInfo API from react-native in order to
monitor the network connectivity information and
then respond to any changes to the network connectivity.
Let's see how we can make use of the Network Info API within our application.
Going to our application let's open the Main Component,
and in the main component we're going to use the NetInfo and the toast android,
both of these from react-native in order
to respond to changes in the network information and then
also be able to show
a toast message on the screen whenever the network connectivity changes.
Here from React Native let me also import NetInfo and then toastAndroid.
Now once we do that let's go into the main component.
The main component is described right way below here.
In the main component where we have the componentDidMount method.
In the componentDidMount method we're going to use the NetInfo to check for
getConnectionInfo and this will return a promise.
So within the promise we will get access to the connection information and
then from here we will generate a message to be shown on the screen.
So we'll say ToastAndroidShow and we'll say
Initial Network Connectivity Type.
Then we continue on the next line plus
ConnectionInfo.type+effectivetype. So two piece of information that we can show and
then we'll say +ConnectionInfo.effectivetype.
So two piece of information that we will show.
We will show this message for- Let
me go to the next line, ToastAndroidLong.
So a long-duration pop off this message on the screen.
As soon as our application starts,
that's what we will see being popped up on the screen.
After that we will add EventListener.
Add EventListener.
We'll name it as ConnectionChange and then we will
add the EventListener which we are going to implement right
now called this handleConnectivityChange,
which I'm going to implement in a minute.
That is what we will register as the NetworkInfoaddEventListener.
Whenever there is a connection change,
this will be called and
then you will be able to get the information and then respond to this.
Now whenever you registered an add EventListener,
you should also make sure that you will unregister the listener.
So in the component
will unmount method.
So this will be called just before the component gets unmounted from the application.
So at that point,
we'll call the NetInfo,
RemoveEventListener, and this is important.
Connection the name that we used is,
the ConnectionChange this one and then supply
this handleConnectivityChange method here.
We'll ensure that will remove that listener at the point.
Now the last thing that is left for us is to implement the handleConnectivityChange.
Now in the handleConnectivityChange this would be implemented.
We'll receive the ConnectionInfo as a parameter,
so every time it is called that will receive the ConnectionInfo is a parameter.
In here they will say switchConnectionInfo.type.
Based on what kind of connection it is,
we'll have several cases; "None."
The first one, then we'll have Wifi, cellular.
There are more options that are available but I'm going to check for these two;
unknown type and default where I will break.
For "none" we will pop up a message as toastAndroidshowyouarenowoffline.
When you have no connectivity then you popup message saying,
You are now offline and we will show this
for long duration
and then we'll break.
That's what we will display on the screen.
Now of course we can act on this if you wish to,
when there is a change you can act to turn off certain things and respond appropriately.
But right now in this exercise,
I'm just simply displaying
a toast message on the screen just to indicate that something has changed.
For the WiFi you'll say "You are now connected to WiFi."
Then for cellular we can say,
" You are now connected to cellular" and then you are
now so here you'll say "You now
have an unknown connection."
We are unable to determine what it is so we'll just say "you have
an unknown connection" and that's about it.
Let's save the changes and then go and see how this responds.
Let me restart my application.
When my application restarts you will see in initial pop up on the screen,
with the initial network connectivity that is shown right at the bottom there.
Let me now disconnect my Wifi connection and see what happens.
I have disconnected my Wifi connection and immediately you saw
a toast message there saying you are now offline.
Let me reconnect to my WiFi and
then the moment I get connected you can see the toast message right there saying,
you are now connected to WiFi.
One more time. Let me turn off my Wi-Fi connection.
Then you immediately saw the popup message there.
Then turn the WiFi connection on and then as soon as they get
connected you see the toast message there saying you're not connected to WiFi.
One more time. The moment I go offline it pops up saying,
you are now offline and then the moment I get reconnected,
it pops a toast message saying you are now connected to WiFi and so on.
So that's how the network connectivity information can be
checked using the NetInfo API from React Native.
With this we complete this exercise.
This is a good time for you to do a git commit with the message "Network Info".
