Tìm hiểu và ứng dụng react native

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
ĐỒ ÁN

CHUN NGÀNH
ĐỀ TÀI
Tìm hiểu và ứng dụng React Native

Giảngviênhướngdẫn: ThầyHuỳnhTuấn Anh
Sinhviênthựchiện:
• Vương Bảo Minh - 17520768
• NguyễnVĩnhDuyệt - 17520411

1


LỜI CẢM ƠN
TrântrọnggửilờicảmơnthầyHuỳnhTuấn
Anh
đãtạođiềukiệnchochúngemcócơhộiđượcthựchiệnđềtàinày.
Chỉtrongmộtthờigianngắn,
nhưngnhờsựchỉdẫnnhiệttìnhcủathầy,
chúngemđãtiếpthuđượcnhữngkiếnthứcquantrọngđểcóthểxâydựngđượcứngdụ
ngđọcbáobằng
React
Native.
Chânthànhcảmơnthấyđãhướngdẫnchúngemtronghọckìvừa qua.
Tuyđồánvẫncịnnhiềuthiếusótnhưngnhờcósựchỉdẫncủathầymàchúngem
đãtiếnbộhơnrấtnhiều, cũngnhưcóhướngpháttriểndựántrongtươnglại.
Mộtlầnnữa, chúngemxincảmơnthầy
<Nhómpháttriển>

<TpHCM, ngày 15 tháng 1 năm 2021>

2


NHẬN XÉT CỦA GIẢNG VIÊN
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

3


MụcLục

4


5


I. Tổngquanvề React Native

1. Giớithiệuchungvề React Native
-

React Native làmộtjavascript framework đượcpháttriểnbởi Facebook.
React Native đượchướngtớiviệcpháttriểnứngdụng di độngđanềntảng(cross-

-

platform) chocả android vàios.
React Native đượcpháttriểndựatrênmột web framework của Facebook gọilà

-

React
Ngơnngữsửdụngđểlậptrìnhtrong React Native làJavascriptvà JSX.
Mụctiêucủa
React
Native
làgiúptốiưuhiệunăngcủa
Hybrid

app

vàtốigiảnsốlượngngơnngữ native di động.

2. Lịchsửhìnhthành React Native
-

Năm

2012,

Mark

Zuckerberg

lầmlớnnhấtcủachúngtơikhilàmcơng

ty

đãphátbiểu:

“Sai

làdựatrênqnhiều

HTML

hơnlàmơitrườngpháttriểngốc”. Ơnghứarằng Facebook sẽsớmcungcấptrảinghiệm
-

di độngtốthơn.

Kỹsư Jordan Walketại Facebook đãtìm ra cáchxâydựngcácthànhphầnUIcho iOS
bằngmộtluồngJavaScript.
HọquyếtđịnhtổchứccuộcthiHackathonđểhồnthiệnngunmẫuhệthốngđểcóthểxâ

-

ydựngcácứngdụng di độnggốc (native app) bằngcơngnghệnày.
Sau nhiềuthángpháttriển, Facebookđãpháthànhphiênbảnđầutiêncho
Native

vàonăm

2015.

Trongmộtcuộchộithảocơngnghệ,

ChedeauchobiếtFacebookđãsửdụng

React

React

Christopher
Native

trongpháttriểnứngdụngnhómvàứngdụngquảnlíquảngcáocủahọ.

3. Tạisao

React

Native

lạitrởnênphổbiếnvàmạnhmẽtronggiớilậptrình?
-

Hot reloading, thứmànhữngứngdụng Native Code khơngcó.

-

Code mộtlần, chạynhiềuchỗ, nềntảng Cross-Platform cóthểchạytrêncả
6


Android và iOS.
-

DựatrênnềntảngngơnngữJavascript,

ngơnngữ

“đanăng”

đượcgiớilậptrìnhviênưachuộngvàphổbiếnnhấtthếgiới.
-

React

Native

tạonênsự

“mượtmà”

trongviệc

vàxóanhịakhoảngcáchvềhiệunănggiữaứngdụngđanềntảng

render

UI
so

vớiứngdụngđộclậpnềntảng.
-

Facebook, instagramlà 2 ứngdụngmượtmàđượcxâydựngbằng React Native
vàchúngthựcsựchothấy

React

Native

lànềntảngtốtnhấtcholậptrìnhviênứngdụng.
-

Đằngsau React Native làmột Facebook đangrấtmạnhchốnglưng, đólàlý do
tạisao React Native được tin tưởngsẽlànềntảngthốngtrịtrongthếgiớikhichỉcó
Native App và Hybrid App.

4. Đặcđiểmnổibậtcủa React Native
-

React Native tíchhợp 2 thread là Main thread và JS thread choứngdụng
mobile:
+

Main

thread

đảmnhiệmvaitrịcậpnhậtgiaodiệnngườidùngvàxửlítươngtácngườidùngtron
7


gqtrìnhsửdụng app.
+
-

JS thread sẽthựcthivàxửlí code javascript.

Hai thread sẽtươngtácvớinhauthơng qua mộtcầunối(React Native Bridge)
chophépchúnggiaotiếpmàkhôngphụthuộclẫnnhau, chuyểnđổidữliệutừ thread

-

này sang thread khác.
React Native sẽ render native UI component phụthuộcvàonềntảng di
độngmàngườidùngđangsửdụngnêngiaodiệnứngdụngsẽgầngũivớinhiềuloạing

-

uờidùngkhácnhau.
React Native sửdụng JSX đểkếthợpJavascriptvà XML-markup syntax đểtạo
ra

-

giaodiện.

Ngườilậptrìnhcóthểviếttấtcảchỉtrongmột

file

duynhấtchứkhơngcầnphải chia ra nhiều file HTML, CSS, JS nhưlậptrình web.
Nếunhưkhi design trongứngdụng web chúng ta dùngcssthìtrong React Native
chúng ta cũngcómộtthứtươngtựgọilà flexbox layout model đểtùychỉnhthiếtkế

-

component.
Trong React Native, chúng ta sẻ chia nhỏứngdụng ra thànhnhiều component.
Đâylàthànhphầncơbảnnhấttrongmọiứngdụng react native vàmọithứtrong app

-

đềuđượccấuthànhtừđó:
Mộtsốloại component phổbiếnthườngdùngtrong react native:
+

View:

Là

component

cơbảnnhất,

dùngđểlàmkhunghiểnthịchocác

component kháctrênmànhình.
+

Text: Là component dùngđểchứakítựxuấthiệntrênmànhình.

+

Image: Là component giúpthêmhìnhảnhtừtrên Internet hoặctừ local
vàoứngdụng React Native.

+

Touchable

Opacity:

Làmột

component

màchúng

ta

cóthểnhấnvàođểtươngtácvàthựchiệnmộthàmgìđó.
+

ScrollView:Làmột scrolling component cóthểchứanhiều component và
view.

+

TextInput: Là component chophépngườidùngnhậpliệutrênmànhình.

+

Button:

Là

component

tươngtựnhưTouchalbe

Opacity

nhưngngườidùngkhơngthểtự do custom theo ý mình.
+

Status Bar: Là component sửdụngđểkiểmsoátthanhtrạngtháitrênứngdụng.

8


-

Trong qua trìnhquảnlí component, chúng ta sẽgặpphải 2 kháiniệmlà props và
state:
+ Props: Viếttắtcủa properties.
●

Props dùngđểtruyềndữliệutừ component cha xuống component con.

●

Khi

truyềndữliệu

qua

props,

component

con

chỉđượcđọcvàkhơngđượcphépthayđổinó.
●

Điềunàykhiếnchodùchúng

ta

bấtkìđâucũngsẽcóchung

1

sửdụng
output

component

khinhậpcùng

1

ở
input

=>Giúpkiểmsốt component tốthơn.
+

State: Nếunhư props đượctruyềngiátrịtừbênngồivào component, state

lạilàdữliệunộibộcủa component.
●

Bấtcứkhinàongườidùngthayđổigiátrịtrong

component

thìchúng

ta

đềucóthểdùng state đểcậpnhậtlại.
●

Khi

gọihàmSetStatethì

React

Native

sẽ

render

lạigiátrịtrong

component.

5. Nhượcđiểmcủa React Native
-

Chỉhỗtrợ 2 nềntảng iOS và Android, Windows vàlinuxchưacó official support từ
React Native team.

-

Khơngthể build đượcứngdụngqphứctạpnhư native.

-

Khótiếpcận (theonhiều developer nhậnxét).

-

Chưacó IDE hỗtrợ (IDE dànhriêngcho React Native chưađược release)

-

Cầnbiết 1 ngônngữ Native .

-

React Native chưahỗtrợ push thẳnglên App Store hay Google Play.
9


-

Nhữnglầnphảithayđổi source lớnkhi upgrade phiênbản React.

6. So

sánh

React

Native

vànềntảng

Cross-platform

rấtmạnhhiện nay: Flutter

10


Flutter:
Ưuđiểm:
11


– Mạnhvề animation, performance app rấtcao.
– Giao tiếpgầnnhưtrựctiếpvới native
– Static language nhưngvới syntax hiệnđại, compiler linhđộnggiữa AOT (for archive, build
prod) và JIT (for development, hot reload)
– Cóthểchạyđượcgiảlập mobile ngaytrên web, tiệncho development. Các metric measure
performance đượchỗtrợsẵngiúp developer kiểmsoáttốt performance của app.
– Cóthểdùngđể build các bundle/framework gắnvà app native đểtăng performance.
Nhượcđiểm:
– Bộ render UI được team author gầnnhưviếtlại, khơngliênquantới UI cósẵncủa
Framework native, dẫnđến memory sửdụngkhánhiều.
– Phảihọcthêmngônngữ DART, bloc pattern, DART Streaming.
– Dùđã release 1.0 chínhthức, tuynhiêncịnkhámới. Mộtsố plugin rấtquantrọngnhư Google

Map vẫncịnđangpháttriển, chưa stable.
– Là con cưngcủa Google, tuynhiênhãngdínhnhìuphốtvớithóiquen “quăng con giữachợ”
nêncầncânnhắc.

React Native:
Ưuđiểm:
– Thiênvề development/hotfix nhanh (hot reload, bundle injection)
– Sửdụng JS (quenthuộcvớinhiều developer) vàcóthể share business logic codebase với
frontend (js).
–

Back

bởi

Facebook,

họdùngcho

product

củahọhàngngàynên

developer

hưởnglợikhánhiềutừđây.
– Hiệntạiđãrấtnhiềuthưviện, gầnnhưđãrấtđầyđủchocácnhucầu app thôngdụng.
Nhượcđiểm:
– Giao tiếpvới native thông qua các bridge, dễbị bottleneck nếukhơngđượckiểmsốttốt.
– Dùng JS nênmangtheocácđặcđiểmcủa JS: rấtdễlàmnhưngcũngdễsai, dẫntớikhó

12


maintain vềsau.
– HIệunăng animation làđiểmyếucủa RN, muốnlàmtốtphảilàmtừ native, tầngjschỉ call vào,
setup views. Tuynhiênvớicác interactive animation thìrấtđaukhổ.
– Khơngthíchhợpchocác app cầnnănglựctínhtốncao (hash, crypto, etc).

7. Liệu

React

Native

cịnsứccạnhtranhvới

Flutter

trongtươnglai?
-

Tấtcảmọisự so sánhđềulàkhậpkhiễng, vì:
+

React Native cho ta mộthiệunăngtươngtựnhư “Native App Performance”.

+

Mộtcộngđồnghỗtrợlớnmạnh.

+

NhữnglậptrìnhviênsửdụngJavascriptvàmuốnlấnsân

sang

ứngdụng

di

độngmộtcáchdễdàng.
->
Flutter

React

Native

từ

Google,

sẽcịnđượccậpnhậtvàpháttriểndàitrongtươnglaiđểcạnhtranhvới
chúng

ta

sẽkhơngbiếtđượcnhữnggìsẽxảy

ra

nhưngchắcchắnrằngmộtnềntảngtuyệtvờinhư React Native sẽkhơng bao giờ “chết”
bởimộtcộngđồnglậptrìnhviênlớnsẽlnđónggópvàduytrìđứa con tinhthầncủahọ.

II. Xâydựngứngdụngsửdụng React Native

1. Expo là gì? Sửdụng Expo khởichạyứngdụng
-

Expo

làmột

framework

dùngđểpháttriểnnhanhcácứngdụng

React

Native.
13


Nógiốngnhư

Laravel

chocácnhàpháttriển

PHP,

hoặc

Ruby

on

Rails

chocácnhàpháttriển Ruby. Expo cungcấpmộtlớpnằmtrêncùngcủa React Native API
đểgiúpchúngdễsửdụngvàquảnlý.
Nócịncungcấpcáccơngcụgiúpbạndễdàngkhởitạovàkiểmthửcácứngdụng
Native.

Sau

cùng,

nócungcấpcácthànhphần

React
UI

vàcácdịchvụthườngchỉcósẵnkhibạncàiđặtmộtthànhphần React Native củabênthứba.
Tấtcảđềuđượccungcấpthơng qua Expo SDK.

-

Khởichạyứngdụng qua Expo:
B1: Vàothưmụcchứaứngdụng, tạiđườngdẫnthưmụcứngdụng, mởtrình “cmd”

‘

14


B2: Sửdụnglệnh “Yarn start” đểkhởichạyứngdụng, lúcnàytrình Yarn sẽhiệnlên 1 mã
QR,

nếusửdụngmáyảothìkhơngcầnquantâm,

nếusửdụngđiệnthoại

ta

thựchiệnqtmã QR để Expo càiđặtvàmởứngdụng

15


2. Cáctínhnăngđượcxâydựng
2.1 Đăngkýtàikhoản.

16


17


2.2 Đăngnhậptàikhoản.

18


19


2.3 Quênmậtkhẩu.

20


2.4 Chọnloạibáo.

21


2.5 Hiểnthịdanhsáchbáotheothờigianthực.

22


2.6 Xem chi tiếttừngthông tin bàibáo.

23


24


3. Cấutrúcthưmụcdựán

25