Exercise (Video): React Native Components Part 1

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Multiplatform Mobile App Development with React Native

個評分

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

個評分

課程 3（共 4 門，Specialization Full-Stack Web Development with React）

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

從本節課中

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.

React Native Components5:10

Exercise (Video): React Native Components Part 120:04

Exercise (Video): React Native Components Part 214:28

與講師見面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

It's time to begin modifying the React Native app that we

have scaffolded out to build up our own React Native application.

In In this exercise, we're going to build up our first set of components that

we're going to add to our React Native application to start building up.

Along the way we will learn about React Native elements, some of the components

from React Native elements, some of the built-in components from React Native,

and then see how we can design the UI for our application.

To get started with this exercise,

go to your project in Visual Studio and

then create a folder in the topmost folder called [SOUND] components.

And, as you would expect, that is where I'm going to be storing

the components that I'm going to create for my application.

And also, create another folder named shared, where I will

store some shared information that is used by various components in my application.

So, after we do this, let's go to the instructions, and

we will download a ZIP file given there called images.zip file.

Going to the exercise instructions for this exercise, you will notice,

right in the top, an images.zip file that I've given.

Download that images.zip file, unzip it, and

then you will get the images folder in there.

Move this images folder into the components folder that we just created.

You can either do that using the built-in File Explorer or

the Finder in your computer to enable you to perform this operation.

So here you see that I have moved my images folder containing these

images into my components folder there.

Now, once we do that then the next step is to install the React Native elements.

To install React Native elements into your project,

go to a terminal tab or a command window and in the folder of your project,

type yarn add react-native-elements@beta.

And this would install the latest beta version of the React Native elements.

And once that is installed, then you would have the react-native-elements

version 1.0.0-beta5 installed.

So that's the version that I'm going to start with in this course.

Now, we have created this shared folder here.

Now, what we're going to do is to go to the instructions and

then download a file that I have given there named dishes.js file and

then move into the shared folder there.

So going to the instructions,

the dishes.js file that I've given here, download this and

name it as dishes.js file and then move it into the shared folder.

And once you move the file into the shared folder you will see the dishes.js file.

You can open it and see that it contains some JavaScript objects defined there,

and this contains the data that I'm going to use in order to create

the views for my React Native application.

Next, in the components folder, let's create our first component and

we'll call it as MainComponent.js5.

And so in the MainComponent.js5, I'm going to create my first component and

then make use of it in the app.js5.

So, in the main component,

let me import React, and { Component

} from 'react'; as we would expect.

And then I am going to import Menu

from './MenuComponent'.

So this should automatically suggest to you that pretty soon,

I'm going to create another component called menu, and so

that is what would contain the details of the menu here.

And then, I'm going to also

import the { DISHES } from

'../shared/dishes'.

So the DISHES is exported from dishes.js, so

when you open dishes.js you will see that it exports this constant called DISHES,

so that I am going to import in here.

So that'll provide me the starting data that I can render the view from.

And once we do that,

then we'll create my main component.

And so, from your knowledge of React,

This should be quite familiar to you.

So we created the main class component here and inside

there I will define the constructor with the props.

Now, I am not explaining the React part of the code here

because that should be quite familiar to you from your knowledge of React.

So, I am creating a state here called dishes,

which I will put as DISHES, and

then implement the render method here.

Which will return,

The Menu component, to which I supply the,

this.state.dishes as the props here.

With this, my main component is now built up.

Now I'm going to my app.js file,.

In my app.js file, I'm just going to get rid of all this.

I don't need this a this moment, because I won't be doing any styling in here.

And then similarly I'm going to get rid of these styles.

I'm going to import Main from

'./components/MainComponent'.

And then from this I'm going to simply return,

The main components view here.

That's about it.

So that's my app.js and MainComponent.js file.

Nothing spectacular here, we have just created a component and

then using it in the app.js file, in the app component, that's about it.

Now, in the main component, we had created, or

we had expected that we would have the menu component in place.

So, let's go ahead and create the menu component.

So, in the Components folder,

I'm going to create a new file called MenuComponent.js.

And, in the MenuComponent.js, I'm going to copy that from there.

Sometimes I am lazy to type code, so

I'll just Copy code from another file.

And then also, I will import View,

we've already seen View earlier, and FlatList.

What is FlatList?

FlatList is another component that is exported by react-native and

that will help me to create a list of items, as you would expect.

And also, I will import another component

called ListItem from react-native-elements.

These two react-native components, the FlatList and

the ListItem, help me to create a list of items here.

Now what are the list of items?

The list of items will be the list of dishes that I have in my dishes.js file,

so I'm going to render them to the view.

How do I do that?

I will implement a functional component here called Menu,

which receives their props as the parameter and

then we will immediately export.

Now, I do this in a certain order simply so that I will not miss any of the steps.

So whenever I create a component and I'm going to export them,

I will first put the export before them there.

Many times people forget that and

that leads you into a wild-goose chase after missing items in there.

So follow a certain pattern in the way you write your code to save

yourself the trouble here.

Now, this function, what is this function going to do?

It is going to return.

As you realize, in a functional component,

you simply return a view by using a return statement.

And this is going to return a FlatList here.

And what does the FlatList take as its props?

The FlatList expects me to supply some information

which it will use in order to render the list of items.

Now, this FlatList will be mapped into a list view in Android and

the corresponding list view in iOS.

So that's what is going to be done automatically for us by react-native.

Now, what does this FlatList take?

It takes a data as one of the parameters and

the data that I'm going to pass is props.dishes.

Recall that main component was sending in dishes as the props for

my menu component, so there I'm going to pass that in as the data for my FlatList.

And then another prop that FlatList takes is called renderItem.

What does renderItem do?

The renderItem can be used to specify how to render each item in the list.

So notice how the list is rendered in react-native and

different from the way it is rendered in a typical React application.

The FlatList allows me to render a list of items like this.

So what does this renderItem do?

The renderItem takes, A parameter

which is where we will render each item in the list.

So when you supply a props here, this should be an array of objects there.

And then so the FlatList will literally iterate over

every item in this array, and then render each one of them

using the view that is given in the renderMenuItem here.

So that's how we interpret this.

And also, when you render a list of items,

you would have to Supply a key for each of those items.

Now, the FlatList supports this thing called a keyExtractor.

The keyExtractor will extract one of the props off each

item in the array and use that as a key here.

Now, in this case, every item, when you go into dishes.js file,

you'll notice that every item in the dishes.js file has this id here.

So I'm going to use this as my key for my items in the list.

Now, from your React course,

you should know why every item in the list requires its own key.

So we'll say item.id since that happens to be a,

A number, so I'm going to turn that into a string by saying item.id.toString

because the keyExtractor expects me to supply a string here.

So this is the key item that I'm going to be using.

Now, this leaves out how we're going to construct this renderMenuItem.

So let me implement the renderMenuItem function here,

so I will say const renderMenuItem.

And then implement this as an arrow function here.

And then we'll say it takes two parameters.

It takes item and then the index as the two parameters.

So, the item is what, this item will give me access to each item in this array here.

So when you supply a data which is an array here, each item,

each element in the array will become

an item that is supplied to this particular function that is rendered here.

Here, what I'm going to do is to take that item and then render that.

Now, how am I going to render that?

I'm going to return from this so you see,

this is a function that returns a.

So this is where I'm going to make use of the ListItem from react-native-elements.

So this ListItem from react-native-elements, since I have

already studied the documentation, I know how to make use of it.

This ListItem takes several properties here.

The first one I will give it is a key property.

This key property is index here.

Now this index would be what is supplied through this keyExtractor.

When you do the keyExtractor here, going to be supplied as an index here and

that index can be used as the key for each list item here.

And then for this, the title, item.name.

Now if you go into the dishes.js file, you see that this contains a name,

an image, a category, a label, price, featured, description.

So all these parts can be used when I'm rendering the item here.

So title is item.name.

I'll say subtitle is item.description.

Now you can read the documentation for the list item.

A link to which is in the relational resources to understand exactly what these

properties are.

But if you want to just see how the ListItem is rendered, after we complete

modifying the code, we will see the updated app in our mobile device.

Subtitle and then we'll say hideChevron.

Now by default, it will put a right arrow in each element in the list.

That is the iOS way of rendering lists but in Android, you don't use the right arrow.

And then so I'll say hideChevron={true} so I don't want to show the chevron or

the right arrow kind of thing in my list item.

And then it uses another parameter called leftAvatar.

The left avatar takes an image, and then renders that image in there.

How do you supply an image for an item in React Native?

So we'll say note this is two braces,

and inside the second brace I will say source, source is a property.

So this is a JavaScript object,

we just supplied as a parameter to the left avatar here.

So the leftAvatar takes the source which I would supply as require.

Now this is one way of specifying how an image needs to be centered.

If I say require that means that,

whatever I supply as the image here should be already included in the code here.

Now since we've already included the images folder and

which contains the images there.

I can simply make use of them here.

So I'll say ./images

And supply an image.

Now, when you say required, you have to supply an exact image.

You can't programmatically modify this.

This is one of the restrictions of using require.

But we'll soon overcome this later on

when we actually obtain the images from the server side.

Then you can use a URI for the source and

the URI is a uniform resource indicator which can take a URL as its parameter.

So at that point, you will see that I will be able to use different images for

the different dishes.

But right now, what I'm going to construct, it'll use the same image for

all the dishes.

That's okay, we're just exploring the application at this moment.

That's it, let's save the changes and then go back, and

take a look at our application.

So at the end of this exercise, this is what our application will look like.

Voila.

There we have a list of our additions being rendered here and you see how

the title display and how the description is displayed at the bottom here.

And so this is a list of items.

So we have created this using the blacklist, and

the list item from the React native elements.

Blacklist from React Elements and Listitem in React Native Elements, that's it.

Also, note how the images are rendered to the left of the screen, here.

Now, of course, this looks terrible because this is a tablet.

This looks much better on a mobile phone.

When you render this on a mobile phone it'll look much better.

Now we can adjust these things a little bit to suit different screen widths and

so on, but I will leave that for a later exercise.

So with this we have completed what we wanted to accomplish in this exercise.

We wanted to create our first set of components and

then render the views in the screen there.

With this, we complete this exercise.

This is a good time for

you to do a git-commit with the message components part one.

[MUSIC]

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取