React Native là gì ? Hướng dẫn setup và tự học lập trình React Native từ cơ bản đến nâng cao

React Native – Một framework đứng trên tất cả

React Native đã được áp dụng thành công bởi hàng nghìn doanh nghiệp trên khắp thế giới, bao gồm có Uber, Microsoft và Facebook, và được sử dụng rộng rãi trong rất nhiều ngành công nghiệp.

Tuy nhiên trước khi bạn quyết định “dấn bước” và React Native thì bạn cần phải hiểu được React Native là gì? Nó hoạt động như thế nào ? Làm sao để cài đặt React Native? Và phải học nó như thế nào? Đừng lo, bài viết này sẽ giải đáp tất cả các thắc mắc trên của bạn để biết rằng liệu bạn có phù hợp với framework này hay không.

Nội dungTrong một vài năm trở lại đây, React Native đã trở thành một chủ đề “ nóng ” trong giới lập trình di động. Điều này cũng không có gì lạ, bởi nó nổi tiếng một cách nhanh gọn trong quốc tế công nghệ tiên tiến bởi nó cung ứng giải pháp lập trình ứng dụng di động đồng thời cho cả iOS và Android. React Native đã được vận dụng thành công xuất sắc bởi hàng nghìn doanh nghiệp trên khắp quốc tế, gồm có có Uber, Microsoft và Facebook, và được sử dụng thoáng rộng trong rất nhiều ngành công nghiệp. Tuy nhiên trước khi bạn quyết định hành động “ dấn bước ” và React Native thì bạn cần phải hiểu được React Native là gì ? Nó hoạt động giải trí như thế nào ? Làm sao để thiết lập React Native ? Và phải học nó như thế nào ? Đừng lo, bài viết này sẽ giải đáp tổng thể những vướng mắc trên của bạn để biết rằng liệu bạn có tương thích với framework này hay không .

Nội Dung Chính

1. React Native là gì ?

1.1. Khái niệm

React Native là một framework lập trình ứng dụng di động dựa trên JavaScript nổi tiếng cho phép bạn xây dựng các ứng dụng di động gốc cho iOS và Android. Framework cho phép bạn tạo ra một ứng dụng trên nhiều nền tảng sử dụng cùng một codebase.

React Native được ra mắt lần đầu bởi Facebook dưới dạng một dự án mã nguồn mở vào năm 2015. Chỉ trong một vài năm, nó trở thành giải pháp hàng đầu cho phát triển ứng dụng di động. React Native đã cung cấp hỗ trợ cho một trong những ứng dụng di dộng hàng đầu thế giới, bao gồm Instagram, Facebook, Skype,..v..v..

Bạn đang đọc: Hướng dẫn cài đặt và tự học lập trình React Native từ cơ bản đến nâng cao

1.2. Tại sao React Native lại trở nên phổ biến ?

Một trong những framework liên nền tảng tổt nhất đó là React Native, là giải pháp phát triển trên nền tảng di động phổ biến nhất cho các startups và các nhà phát triển ứng dụng hiện nay.

Các framework phát triển ứng dụng di động trong năm 2019-2020
Nguồn: Statista
Khi những nhà tăng trưởng tạo ra một ứng dụng gốc, họ cần phải gấp đôi số tiền góp vốn đầu tư dự trù để tạo ra ứng dụng cho những thiết bị trên cả Android lẫn iOS. Kết quả là ngân sách sẽ tăng lên, và việc phảt triển ứng dụng sẽ trở nên phức tạp và tốn thời hạn hơi. Trái lại, tăng trưởng ứng dụng liên nền tảng giúp những lập trình viên chỉ cần sử dụng cùng một code base. Một trong những framework liên nền tảng tổt nhất đó là React Native, là giải pháp tăng trưởng trên nền tảng di động phổ cập nhất cho những startups và những nhà tăng trưởng ứng dụng lúc bấy giờ. Các framework tăng trưởng ứng dụng di động trong năm 2019 – 2020N guồn : Statista

1.3. React Native hoạt động như thế nào ?

Như đã đề cập đến ở phía trên, React Native được viết bằng sự kết hợp giữa JavaScript và JXL, một code đánh dấu đặc biệt giống như

Sau đây là mô tả trực quan về concept cầu nối:

Nguồn: Hackernoon

Điều này có nghĩa là nếu bạn đã có một ứng dụng iOS hay Android gốc, bạn vẫn có thể dùng các thành phần của nó hoặc chuyển sang lập trình bằng React Native.Có 2 luồng quan trọng chạy trong toàn bộ những ứng dụng React Native. Một trong số đó là luồng chính, cũng được chạy trong toàn bộ những ứng dụng gốc tiêu chuẩn. Nó quản trị về hiển thị những thành phần của giao diện và giải quyết và xử lý cử chỉ của người dùng. Luồng còn lại là của riêng React Native. Nhiệm vụ của nó là thực thi code JavaScript trong một JavaScript engine khác. JavaScript đảm nhiệm về logic nhiệm vụ của ứng dụng. Nó cũng định nghĩa cấu trúc và những tính năng của giao diện người dùng. Hai chuỗi này không khi nào truyền thẳng và cũng không khi nào chặn nhau. Như đã đề cập đến ở phía trên, React Native được viết bằng sự phối hợp giữa JavaScript và JXL, một code lưu lại đặc biệt quan trọng giống như XML. Framework hoàn toàn có thể tiếp xúc với cả 2 miền : Các luồng của JavaScript và những luồng sẵn có của ứng dụng gốc. Giao tiếp này hoạt động giải trí như thế nào ? React Native sử dụng một concept được gọi là cầu nối ( bridge ). Trong khi những luồng JavaScript và luồng gốc được viết bằng những ngôn từ trọn vẹn khác nhau, tính năng cầu nối sẽ giúp cho việc tiếp xúc 2 chiều khả thi. Sau đây là diễn đạt trực quan về concept cầu nối : Nguồn : HackernoonĐiều này có nghĩa là nếu bạn đã có một ứng dụng iOS hay Android gốc, bạn vẫn hoàn toàn có thể dùng những thành phần của nó hoặc chuyển sang lập trình bằng React Native .

1.4. Tại sao lại sử dụng React Native làm Framework phát triển ứng dụng?

Giao diện người dùng tương tác

Lý do chính cho thành công xuất sắc của công nghệ tiên tiến React Native đó là việc đơn giản hóa giao diện người dùng di động. Như đã nói đến ở trên, đây là một mạng lưới mã nguồn mở để những lâpj trình viên hoàn toàn có thể sử dụng những dãy đơn cử để kiến thiết xây dựng ứng dụng. Hơn nữa, ứng dụng kiến thiết xây dựng bằng React Native phản hồi tốt hơn, tốn ít thời hạn tải hơn và phân phối một thưởng thức người dùng liền mạch .

Framework phát triển ứng dụng hiệu quả về chi phí

Việc tái sử dụng code giúp giảm thiếu một cách đáng kể chi phí phát triển ứng dụng cho iOS và Android. Với framework này, các nhà phát triển không cần phải viết code cho cả 2 nền tảng và code cho ứng dụng ngôn ngữ sẵn có. Do vậy, bạn sẽ giảm thiểu số lượng các nhà phát triển gốc cần thiết và thời gian hoàn thành dự án.

Độ tin cậy cao

React Native đảm bảo an toàn cho việc liên kết dữ liệu và ngăn dữ liệu cha không bị ảnh hưởng bởi các thành phần con. Vì vậy, ứng dụng sẽ trở nên đáng tin cậy và mạnh mẽ hơn. Nếu nhà phát triển muốn đưa ra các thay đổi thì họ sẽ phải thay đổi trạng thái trước tiên. Điều này cho phép các nhà phát triển chỉ cập nhật các thành phần được cho phép.

Cải thiện hiệu năng

Các module và điều khiển gốc cải thiện hiệu năng của nền tảng. React Native tương tác với các thành phần phát triển ứng dụng của Android và iOS và tạo code cho các API gốc. Và hơn nữa, các dòng code này là tự động và không bị bất kỳ cản trở nào. Ví dụ, khi sử dụng một luồng khác, nó sẽ tự động cải thiện hiệu năng. Cũng có các lựa chọn khác như WebView, nhưng chúng sẽ gây ảnh hưởng đến hiệu năng ứng dụng của bạn.

===> Đăng ký ngay học React Native từ con số 0

Khóa học

Front end với React Native

2. Hướng dẫn cài đặt và thiết lập môi trường làm việc của React Native trên Windows

Đầu tiên tất cả chúng ta sẽ cùng thiết lập React Native trên Windows 10 sử dụng React Native CLI

2.1. Cài đặt Chocolatey

Chocolatey là một trình quản lý package phổ biến trên Windows. Đầu tiên, chúng ta cần cài đặt nó vào hệ thống.
Để cài đặt Chocolatey. Mở bảng lệnh Command Prompt với quyền quản trị viên và chạy các dòng lệnh sau.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2.2. Cài đặt Node.js, Python2 và JDK8

Giờ chúng ta cần cài đặt Node.js, Python2 và JDK bằng Chocolatey. Chúng ta sẽ thực hiện bằng lệnh dưới đây

choco install -y nodejs.install python2 jdk8

2.3. Cài đặt Android Studio

https://developer.android.com/studioAndroid Studio cần phải được cài đặt để hoàn toàn có thể thao tác với React Native. Chúng ta hoàn toàn có thể thuận tiện tải về với link sau :

2.4. Thiết lập Android SDK

Android Studio sẽ mặc định cài đặt phiên bản Android SDK mới nhẩt. Tuy nhiên, lập trình một ứng dụng React Native với code gốc sẽ đòi hỏi cụ thể phải có Android 11.0 (R) SDK. Các Android SDK khác có thể được cài đặt thông qua SDK Manager trong Android Studio.

SDK Manager có thể được truy cập từ màn hình Welcome to Android Studio.

Click vào Configure, sau đó chọn SDK Manager.

SDK manager -> SDK platforms

Sau đó tick vào ô bên cạnh “Show Package Details” ở góc dưới bên phải. Tìm và mở rộng mục Android 11.0 (R) , hãy đảm bảo là tất cả mục sau đều được tick:

Android SDK Platform 26
Google APIs Intel x86 Atom_64 System Image

Các công cụ React Native cần các biến môi trường cho việc thiết lập để có thể xây dựng ứng dụng bằng code gốc.

Mở phần System bên dưới System and Security trong Windows Control Panel, sau đó click vào Change settings. Mở tab Advanced và click vào Environment Variables. Click New để tạo một biến người dùng mới là ANDROID_HOME trỏ về đường dẫn đến Android SDK của bạn:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

Các công cụ React Native cần những biến môi trường tự nhiên cho việc thiết lập để hoàn toàn có thể kiến thiết xây dựng ứng dụng bằng code gốc. Mở phần System bên dưới System and Security trong Windows Control Panel, sau đó click vào Change settings. Mở tab Advanced và click vào Environment Variables. Click New để tạo một biến người dùng mới là ANDROID_HOME trỏ về đường dẫn đến Android SDK của bạn :

2.5. Cài đặt React Native CLI

Chúng ta có thể dễ dàng cài đặt React Native CLI sử dụng NPM. Bạn có thể thực hiện bằng lệnh dưới đây trong Command Prompt/ Powershell trên hệ thống của bạn.

npm install -g react-native-cli

2.6. Tạo một ứng dụng mới

Với React Native CLI, chúng ta có thể tạo một dự án React Native mới.

react-native init NewProject

Ở đây mình sẽ đặt tên dự án là NewProject.

2.7. Chạy ứng dụng

Giờ chúng ta có thể chạy ứng dụng vừa tạo trên điện thoại Android. Tuy nhiên trước hết, chúng ta cần phải thiết lập thiết bị di động.

Bạn cũng có thể chạy ứng dụng trên Android Virtual Device(AVD) được tạo ra từ Android Studio.

2.7.1. Thiết lập thiết bị Android

Chúng ta cần phải bật USB debugging trong thiết bị Android để chạy ứng dụng React Native mà tất cả chúng ta vừa tạo .

Trên thiết bị Android của bạn, đi tới phần Settings -> About
Chúng ta hoàn toàn có thể thấy menu Build Version .
Tiếp tục click vào lựa chọn Build Version cho đến khi nó được cho phép tùy chọn Developer options .
Trở về Settings và click vào menu Developer options .
Bật tùy chọn USB debugging trong Developer options .

Kết nối thiết bị di động của bạn với hệ thống Windows bằng cáp USB. Nhập dòng lệnh dưới đây để xác định xem thiết bị của chúng ta đã được kết nối hay chưa.
adb devices

Bây giờ, chạy lệnh dưới đây đề chạy ứng dụng React Native trên thiết bị di động của bạn.

react-native run-android

Mình khuyến khích các bạn nên sử dụng

Trên đây chúng ta đã học về các bước để cài đặt React Native on our Windows 10 sử dụng React Native CLI. Ngoài ra bạn còn có thể sử dụng Expo CLI nếu muốn cài đặt và thiết lập React Native dễ dàng hơn.Kết nối thiết bị di động của bạn với mạng lưới hệ thống Windows bằng cáp USB. Nhập dòng lệnh dưới đây để xác lập xem thiết bị của tất cả chúng ta đã được liên kết hay chưa. adb devicesBây giờ, chạy lệnh dưới đây đề chạy ứng dụng React Native trên thiết bị di động của bạn. Mình khuyến khích những bạn nên sử dụng Visual Studio Code làm trình chỉnh sửa và biên tập mã nguồn để thao tác với những dự án Bất Động Sản React Native. Trên đây tất cả chúng ta đã học về những bước để thiết lập React Native on our Windows 10 sử dụng React Native CLI. Ngoài ra bạn còn hoàn toàn có thể sử dụng Expo CLI nếu muốn thiết lập và thiết lập React Native thuận tiện hơn .

3.Hướng dẫn học React Native từ cơ bản đến nâng cao

Sau khi đã thiết lập xong React Native thì mình biết chắc rằng những bạn đang nóng lòng muốn biết toàn bộ những kỹ năng và kiến thức nhưng chớ có vội. Trước hết, tất cả chúng ta phải biết được những nhu yếu cơ bản để giúp bạn không bị kinh ngạc và sẵn sàng chuẩn bị những kiến thức và kỹ năng thiết yếu để hoàn toàn có thể bắt tay vào học React Native :

Bạn cần có những kiến thức và kỹ năng lập trình cơ bản như hàm, đối tượng người tiêu dùng, mảng, và những lớp
Bạn cần có những kỹ năng và kiến thức cơ bản về JavaScript
Đã có kỹ năng và kiến thức về HTML và CSS
Cuối cùng, nếu như trước đó bạn đã thao tác với React. js, thì bạn cũng sẽ biết được rất nhiều kiến thức và kỹ năng về React Native, và do vậy sẽ tiếp thu thuận tiện hơn rất nhiều .

Sau khi đã biết được tất cả chúng ta cần trang bị những gì, tất cả chúng ta hãy cùng tìm hiểu và khám phá về những kiến thức và kỹ năng React Native từ cơ bản đến nâng cao :

I.Kiến thức cơ bản

Phần 1: Ứng dụng đầu tiên “Hello World”

Sẽ không hề thiếu được chương trình tiên phong và cơ bản nhất so với mọi ngôn từ lập trình. Hãy cùng thiết kế xây dựng ứng dụng React Native tiên phong trên Windows với vai trò hệ quản lý tăng trưởng và Android là hệ điều hành quản lý tiềm năng .

Các bước để tạo ứng dụng React Native
Khởi động trình giả lập Android ( Android Emulator ) và chạy nó .
Tạo một thư mục ( ReactNative ) trên bất kể ổ đĩa nào .
Mở ” Command Prompt ” và đến thư mục ReactNative .
Viết một lệnh react-native init FirstApp để khởi tạo ứng dụng "FirstApp" của bạn.

Đi tới vị trí thư mục “FirstApp” và chạy lệnh react-native run-android. Nó sẽ khởi động máy chủ Node và chạy ứng dụng của bạn trên một trình giả lập thiết bị.

Output:

2. Xem code của ứng dụng React Native

Mở bất kỳ IDE nào có hỗ trợ JavaScript mà bạn thích và mở tệp App.js trong ứng dụng FirstApp.

Dưới đây là code mặc định của ứng dụng React Native đầu tiên.

App.jsOutput : 2. Xem code của ứng dụng React NativeMở bất kỳ IDE nào có tương hỗ JavaScript mà bạn thích và mở tệp App. js trong ứng dụng FirstApp. Dưới đây là code mặc định của ứng dụng React Native tiên phong. App. js

import React, {Component} from ‘ react ‘;

import {Platform, StyleSheet, Text, View} from ‘ react-native ‘;

const instructions = Platform.select({

ios: ‘ Press Cmd + R to reload ,\ n’ + ‘ Cmd + D or shake for dev menu ‘,

android:

‘ Double tap R on your keyboard to reload ,\ n’ +

‘ Shake or press menu button for dev menu ‘,

} ) ;

type Props = {};

export default class App extends Component {

render() {

return (

Welcome to React Native!

Text>

To get started, edit App.js

Text>

{instructions}

Text>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘,

backgroundColor: ‘ # F5FCFF ‘,

} ,

welcome: {

fontSize: 20,

textAlign: ‘ center ‘,

margin: 10,

} ,

instructions: {

textAlign: ‘ center ‘,

color: ‘ # 333333 ‘,

marginBottom: 5,

} ,
} ) ;

index.js

/ * *@ format* /

import {AppRegistry} from ‘ react-native ‘;

import App from ‘. / App ‘;

import {name as appName} from ‘. / app.json ‘;

AppRegistry.registerComponent(appName, () => App);

3. Tạo một ứng dụng React Native “Hello World” đơn giản

Chúng ta có thể tạo ứng dụng “Hello World” bằng cách biên tập tệp App.js của FirstApp.

Lưu ứng dụng và tải lại bằng cách nhấn đúp phím “R” hoặc dùng tổ hợp phím Ctrl+M (Reload).

App.js

import React, {Component} from ‘ react ‘;

import {Platform, StyleSheet, Text, View} from ‘ react-native ‘;

type Props = {};

export default class App extends Component {

render() {

return (

Hello World

Text>

View>

) ;

}
}

4. Biên tập ứng dụng React Native “Hello World”

Chúng ta sẽ biên tập ứng dụng React Native “Hello World” bằng StyleSheet.

App.jsOutput : 4. Biên tập ứng dụng React Native ” Hello World ” Chúng ta sẽ chỉnh sửa và biên tập ứng dụng React Native ” Hello World ” bằng StyleSheet. App. js

import React, {Component} from ‘ react ‘;

import {Platform, StyleSheet, Text, View} from ‘ react-native ‘;

type Props = {};

export default class App extends Component {

render() {

return (

Hello World

Text>

View>

) ;
}
}

const styles = StyleSheet.create({

welcome: {

fontSize: 20,

textAlign: ‘ center ‘,

margin: 10,

}
} ) ;

Output :

Giải thích code của React Native Code:Giải thích code của React Native Code :

import React, {Component} from 'react': import thư viện và các thành phần khác từ react module và chỉ định chúng đến biến React.
const instruction: các bộ hiển thị thông báo cụ thể theo từng nền tảng.
export default class App extends Component: định nghĩa các lớp mà mở rộng thành phần React. Modifier export default class làm cho lớp trở nên “công khai”. Khối code định nghĩa các thành phần đại diện cho giao diện người dùng.
render(): trả về một phần tử React element.
return(): trả về kết quả của layout và các thành phần UI.
View: một container hỗ trợ các điều chỉnh các tính năng truy cập layout. Đây là một thành phần cơ bản để xây dựng UI.
Text: là thành phần React để hiển thị văn bản.
style: một property sử dụng để tạo kiểu cho các thành phần bằng StyleSheet.
styles: sử dụng để thiết kế riêng từng thành phần.
const styles = StyleSheet.create({}): là lớp StyleSheet tạo ra các đối tượng kiểu để điều chỉnh layout và bề ngoài của các thành phần. Nó tương tự như Cascading Style Sheets (CSS) sử dụng trên Web.

Phần 2: View, State và Prop

1. React Native View

View là một thành phần cơ bản của React Native để xây dựng giao diện người dùng (UI). Nó là một container that hỗ tợ layout với flexbox, kiểu, thao tác chạm, và các điều khiển khả năng truy cập. Nó ánh xạ trực tiếp vào view gốc tương tự như bất kì nền tảng nào mà ứng dụng React Native đang hoạt động trên đó. Nó hiển thị các thành phần bất kể với UIView,

, android.view, ..v..v..

Thành phần View có thể được lồng vào nhau, chứa các view khác bên trong nó. Nó có thể chứa từ 0 đến rất nhiều thành phần con của bất kỳ loại nào.

Chú ý : Thành phần View được sử dụng cùng StyleSheet khiến nó rõ ràng và đạt hiệu năng tôt hơn well performed, tuy nhiên, nó cũng tương hỗ những kiểu inline .

Các Prop của View

onStartShouldSetResponder	accessibilityLabel	accessibilityHint	hitSlop
nativeID	onAccessibilityTap	onLayout	onMagicTap
onMoveShouldSetResponder	onMoveShouldSetResponderCapture	onResponderGrant	onResponderMove
onResponderReject	onResponderRelease	onResponderTerminate	onResponderTerminationRequest
accessible	onStartShouldSetResponderCapture	pointerEvents	removeClippedSubviews
style	testID	accessibilityComponentType	accessibilityLiveRegion
collapsable	importantForAccessibility	needsOffscreenAlphaCompositing	renderToHardwareTextureAndroid
accessibilityRole	accessibilityStates	accessibilityTraits	accessibilityViewIsModal
accessibilityElementsHidden	accessibilityIgnoresInvertColors	shouldRasterizeIOS

Ví dụ về React Native View

Trong ví dụ này, chúng ta sẽ tạo thành phần View chứa 2 hộp màu và và một thành phần văn bản liền kề nhau với các kích thước chiều cao và chiều rộng.

App.js

import React, { Component } from ‘ react ‘

import {StyleSheet,View, Text} from ‘ react-native ‘

export default class SwitchExample extends Component {

render() {

return (

View Example

Text>

View>

) ;
}
}

const styles = StyleSheet.create ({

container: {

flex: 1,

flexDirection: ‘ row ‘,

height: 100,

width: ” 80 % “,

backgroundColor:” # 5 ead97 “

}
} )

Output :

2. React Na tive State

Có 2 kiểu dữ liệu đó là state và props trong React Native để điều khiển các thành phần. Các thành phần sử dụng state có thể biến đổi. Chúng có thể được thay đổi sau nếu cần thiết. Các thành phần props là không thể biến đổi và cố định trong toàn bộ thời gian hoạt động.

State thường được khởi chạy trong hàm dựng và sau đó gọi setState khi chúng ta muốn thay đổi nó.

React Native state Ví dụ 1

Trong ví dụ này, Chúng ta tạo một thành phần Text với dữ liệu state. Nội dung của thành phần Text sẽ được cập nhật bằng cách click lên nó. Sự kiện onPress sẽ gọi setState, và nó sẽ cập nhật state của văn bản "myState".

import React, {Component} from ‘ react ‘;

import { Text, View } from ‘ react-native ‘;

export default class App extends Component {

state = {

myState: ‘ This is a text component, created using state data. It will change or updated on clicking it. ‘

}

updateState = () => this.setState({myState: ‘ The state is updated ‘})

render() {

return (

{this.state.myState}

Text>

View>

) ;
}
}

OutputReact Native state Ví dụ 2

Chúng ta hãy cùng tạo một thành phần khác của dữ liệu state để thay đổi xen kẽ giá trị của Text giữa "Show" và "Hide" để hiển thị và ẩn phần nhập mật khẩu.

Tạo 3 biến state mà sẽ được thay đổi khi click vào thành phần Text được định nghĩa như một state. Click vào thành phần Text component sẽ gọi hàm handleToggle, và state hiện tại của biến Boolean "isPasswordVisible" được chỉ định trong nó. Lúc này, if sẽ kiểm tra giá trị của "isPasswordVisible" và tiến hành tiếp tùy theo kểt quả.

import React, { Component } from ‘ react ‘;

import {StyleSheet,Text,View,TextInput,TouchableOpacity} from ‘ react-native ‘;

export default class App extends Component {

state: {

password: string,

isPasswordVisible: boolean,

toggleText: string,

}

constructor(props: Props) {

super(props);

this.state = {

password: ‘ ‘,

isPasswordVisible: true,

toggleText: ‘ Show ‘,

} ;
}

handleToggle = () => {

const { isPasswordVisible } = this.state;

if (isPasswordVisible) {

this.setState({ isPasswordVisible: false });

this.setState({ toggleText: ‘ Hide ‘ });

} else {

this.setState({ isPasswordVisible: true });

this.setState({ toggleText: ‘ Show ‘ });

}
} ;

render() {

return (

secureTextEntry={ this.state.isPasswordVisible}

style={{ width: 400, height: 50, backgroundColor: ‘ # a7a6a9 ‘, color: ‘ white ‘, fontSize: 20 }}

/ >

{this.state.toggleText}

Text>

TouchableOpacity>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘,

}
} ) ;

Output

3. React Native Props

Các property của thành phần React Native components được gọi đơn giản là props. Trong React Native, các thành phần có thể được tùy chỉnh trong quá trình tạo ra chúng với các tham số khác nhau. Các tham số này chính là các props. Chúng là không thể biến đổi và không thể thay đổi được.

Một ví dụ về props đó là source property nếu thành phần Image điều chỉnh các hình ảnh được hiển thị trên màn hình của thiết bị.

Props mặc định của React Native

import React, { Component } from ‘ react ‘;

import {

Platform,

StyleSheet,

Image,

Text,

View

} from ‘ react-native ‘;

export default class App extends Component<{}> {

render() {

let imagePath = { uri: ‘ https://facebook.github.io/react-native/img/header_logo.png ‘};

“rel=nofollow”

return (

Welcome to React Native!

Text>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘,

backgroundColor: ‘ # a7a6a9 ‘,

} ,

welcome: {

fontSize: 30,

textAlign: ‘ center ‘,

margin: 20,

}
} ) ;
” rel = nofollow “

Output :Sử dụng props trong thành phần của riêng bạn

Chúng ta có thể sử dụng props trong các thành phần của riêng mình. Một thành phần có thể được sử dụng ở nhiều nơi trong ứng dụng bằng cách dùng các property hơi khác nhau một chút ở từng nơi. Để cài đặt props vào thành phần, this.props sẽ được thêm vào và sau đó là property.

Ví dụ, một trong những thành phần cơ bản của React Native là Text. Khi chúng ta tạo một thành phần Text, chúng ta có thể dùng một prop "name" là props để điều chỉnh bề ngoài của nó. Chúng ta cũng sẽ áp dụng StyleSheet vào thành phần của chúng ta.

App.js

import React, { Component } from ‘ react ‘;

import { StyleSheet, Text, View } from ‘ react-native ‘;

class ChildClass extends Component {

render() {

return (

Hello {this.props.name}!

Text>

View>

) ;
}
}

export default class ParentsClass extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

welcome: {

fontSize: 30,

}
} ) ;

/ / skip this line if using Create React Native App

/ / AppRegistry. registerComponent ( ‘ MyReactNativeApp ‘, ( ) => ParentsClass ) ;

Output :

Phần 3 : React Native Style

React Native chỉ sử dụng JavaScript để tạo kiểu cho các thành phần cốt lõi. Chúng ta không cần bất kỳ ngôn ngữ hay cú pháp đặc biệt nào để định nghĩa cho kiểu. Tất cả các thành phần cốt lõi đều sử dụng một prop (property) đó là style. Các tên và giá trị của style names cũng tương tự như CSS của web. Khác biệt duy nhất là cách viết tên liền nhau không dấu, chẳng hạn như fontSize thay vì font-size.

Style prop is đơn giản là một đối tượng JavaScript, là cách đơn giản nhất để tạo kiểu cho code.

Có nhiều cách để thiết kế các thành phần, sử dụng kiểu inline và StyleSheet.create. Khi các thành phần phức tạp hơn ,thì tốt hơn là nên dùng StyleSheet.create để định nghĩa nhiều kiểu ở cùng một nơi.

React Native style Ví dụ 1

Trong ví dụ này, chúng ta sẽ sử dụng cả kiểu inline và StyleSheet.create. Kiểu inline được áp dụng khi các thành phần được tạo.

App.js

import React, { Component } from ‘ react ‘;

import { AppRegistry, StyleSheet, Text, View } from ‘ react-native ‘;

export default class ImplementingStyle extends Component {

render() {

return (

this is inline style

Text>

just green

Text>

just biggray

Text>

biggray, then green

Text>

green, then biggray

Text>

View>

) ;
}
}

const styles = StyleSheet.create({

biggray: {

color: ‘ gray ‘,

fontWeight: ‘ bold ‘,

fontSize: 30,

} ,

green: {

color: ‘ green ‘,

} ,
} ) ;

OutputReact Native style Ví dụ 2

Chúng ta cũng có thể sử dụng các tệp JavaScript bên ngoài để tạo kiểu cho các thành phần. Trong ví dụ này, we chúng ta sẽ tạo tệp JS bên ngoài và import nó vào tệp App.js của chúng ta.

StyleComponent.js

import React, { Component } from ‘ react ‘

import { Text, View, StyleSheet } from ‘ react-native ‘

const StyleComponent = (props) => {

return (

{props.myState}

Text>

View>

)
}

export default StyleComponent

const styles = StyleSheet.create ({

myState: {

marginTop: 20,

textAlign: ‘ center ‘,

color: ‘ green ‘,

fontWeight: ‘ bold ‘,

fontSize: 20

}
} )

App. js

import React from ‘ react ‘;

import { StyleSheet, Text, View } from ‘ react-native ‘;

import StyleComponent from ‘. / StyleComponent ‘

export default class App extends React.Component {

state = {

myState: ‘ This is my state, style through external style ‘

}

render() {

return (

View>

) ;
}
}

Output

Phần 4 : Chiều cao và chiều rộng

Chiều cao và chiều rộng quyết định hành động kích cỡ của thành phần trên màn hình hiển thị. Có 2 cách để đặt chiều cao và chiều rộng của thành phần : Fixed Dimensions và Flex Dimensions .

Fixed Dimensions ( Chiều khoảng trống cố định và thắt chặt )

Sử dụng chiều cao cố định và chiều rộng cố định trong style là cách đơn giản nhất để đặt không gian của thành phần. Các chiều không gian của thành phần React Native là không có đơn vị, và chúng đại diện cho các pixel độc lập với mật độ.

Thiết lập không gian của thành phần với kích cỡ cố định là thông thường và chính xác về kích cỡ, bất kể không gian của màn hình.

import React, { Component } from ‘ react ‘;

import { StyleSheet, View } from ‘ react-native ‘;

export default class HeightWidth extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

powderblue:{

width: 100, height: 100, backgroundColor: ‘ powderblue ‘

} ,

skyblue:{

width: 200, height: 200, backgroundColor: ‘ skyblue ‘

} ,

steelblue:{

height: 300, backgroundColor: ‘ steelblue ‘

} ,
} )

OutputFlex Dimensions ( Chiều khoảng trống linh động )

Flex property tạo kiểu cho các thành phần để có thể mở rộng hoặc co lại một cách linh động tùy theo không gian đang có. Đặt flex: 1 sẽ lấp đầy các khoảng không gian trống bằng cả thành phần, và được chia đều giữa các thành phần có cùng thành phần cha. Giá trị flex càng cao, thì thành phần đó sẽ chiếm tỉ lệ trong không gia cao hơn so với các thành phần họ hàng của nó.

import React, { Component } from ‘ react ‘;

import { StyleSheet, View } from ‘ react-native ‘;

export default class HeightWidth extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

container:{

flex:1

} ,

powderblue:{

flex:1,

backgroundColor: ‘ powderblue ‘,

} ,

skyblue:{

flex:2,

backgroundColor: ‘ skyblue ‘,

} ,

steelblue:{

flex:3,

backgroundColor: ‘ steelblue ‘,

} ,
} )

Output

Phần 5 : Các nút React Native ( Buttons )

Phần lớn người dùng tương tác với các thiết bị di động qua cảm ứng chạm. Có một tập hợp các cử chỉ với nó, chẳng hạn như gõ vào nút, phóng to bản đồ, cuộn một danh sách, ..v..v.. Nút là một trong những thành phần để thao tác với các click.

Nút React Native là một thành phần cơ bản hoạt động bằng cách click lên nó. Nó import lớp Button của react-native.

Các Prop của Button

Prop	Kiểu	Bắt buộc	Mô tả
onPress	function	Có	Gọi handler khi người dùng click vào nút .
title	string	Có	Hiển thị văn bản bên trong nút .
accessibilityLabel	string	Không	Hiển thị văn bản cho những công dụng truy vấn dành cho người khiếm thị .
color	Color	Không	Đặt màu nền của nút Android hoặc màu của văn bản iOS .
disabled	bool	Không	Vô hiệu hóa toàn bộ những tương tác của thành phần, nếu là true .
textID	string	Không	Sử dụng để xác định view trong kiểm thử đầu-cuối .
hasTVPreferredFocus	bool	Không	Hiệu ứng TV preffered focus, chỉ hoạt động giải trí trên Apple TV .

Ví dụ về React Native Button

Trong ví dụ này, chúng ta sẽ làm việc với thành phần button.Thành phần React Native Button import lớp Button của thư viện react-native. Nó có một vài props như title, onPress, accessibilityLabel, v..v… như đã được nhắc đến phía trên.

Trong code dưới đây title prop sẽ đặt title của nút, onPress prop gọi hàm mention và thực hiện một sự kiện. Color prop sẽ đặt màu của nút, và disabled={true} sẽ vô hiệu hóa nút.

import React, { Component } from ‘ react ‘;

import { Alert, AppRegistry, Button, StyleSheet, View } from ‘ react-native ‘;

export default class ButtonBasics extends Component {

onPressButton() {

Alert.alert(‘ You clicked the button ! ‘)

}

render() {

return (

onPress={ this.onPressButton}

title=” Press Me “

/ >

View>

onPress={ this.onPressButton}

title=” Press Me “

color=” # 009933 “

/ >

View>

onPress={ this.onPressButton}

title=” A disabled button “

disabled={ true }

/ >

onPress={ this.onPressButton}

title=” OK ! “

color=” # 009933 “

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

} ,

buttonContainer: {

margin: 20

} ,

multiButtonContainer: {

margin: 20,

flexDirection: ‘ row ‘,

justifyContent: ‘ space-between ‘

}
} )

Output :

Phần 6 : Layout và Flexbox

React Native Flexbox là một thuật toán để chỉ rõ layout thành phần con của một thành phần cha. Nó sẽ đưa ra layout như nhau trên những kích cỡ màn hình hiển thị khác nhau .

Property của Flexbox

Flexbox cung cấp 3 property chính để đạt được layout mong muốn. 3 property này bao gồm: flexDirection, justifyContent, và alignItems.

Property	Các giá trị	Mô tả
flexDirection	`' column ', ' row '`	Sử dụng để sắp xếp những thành phần thẳng hàng theo chiều dọc hoặc chiều ngang .
justifyContent	`' center ', ' flex-start ', ' flex-end ', ' space-around ', ' space-between '`	Sử dụng để phân chia những thành phần bên trong container .
alignItems	`' center ', ' flex-start ', ' flex-end ', ' stretched '`	Sử dụn để phân chia những thành phần bên trong container với một trục thứ 2 ( trái chiều với flexDirection ) .

React Native Flex Direction

flexDirection thêm kiểu vào các thành phần trên một trục chính trong layout của nó. Nó có một property hàng và cột để sắp xếp các thành phần con lần lượt theo chiều ngang và chiều dọc. default flexDirection là một cột.

import React, { Component } from ‘ react ‘;

import { StyleSheet,View } from ‘ react-native ‘;

export default class FlexDirectionBasics extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

container:{

flex: 1,

flexDirection: ‘ row ‘,/ / set elements horizontally, try column .

} ,

powderblue:{

width: 60,

height: 60,

backgroundColor: ‘ powderblue ‘,

} ,

skyblue:{

width: 60,

height: 60,

backgroundColor: ‘ skyblue ‘,

} ,

steelblue:{

width: 60,

height: 60,

backgroundColor: ‘ steelblue ‘,

}
} )

OutputReact Native Justify Content

justifyContent quyết định sự phân bổ các thành phần con theo trục chính. Thành phần con được phân bố ở đầu, cuối, giữa, hay được căn đều.

import React, { Component } from ‘ react ‘;

import { StyleSheet,View } from ‘ react-native ‘;

export default class JustifyContentBasics extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

container:{

flex: 1,

flexDirection: ‘ column ‘, / / set elements horizontally ` .

justifyContent: ‘ center ‘,

} ,

powderblue:{

width: 60,

height: 60,

backgroundColor: ‘ powderblue ‘

} ,

skyblue:{

width: 60,

height: 60,

backgroundColor: ‘ skyblue ‘,

} ,

steelblue:{

width: 60,

height: 60,

backgroundColor: ‘ steelblue ‘,

}
} )

OutputReact Native Align Items

alignItems quyết định việc sắp xếp các thành phần con theo một trục phụ thứ 2. Nếu trục chính là một cột, thì trục phụ sẽ là một hàng và ngược lại. Sử dụng alignItems, các thành phần con sẽ được xếp thẳng hàng ở đầu, cuối, giữa, hoặc được kéo dãn ra.

import React, { Component } from ‘ react ‘;

import { StyleSheet,View } from ‘ react-native ‘;

export default class AlignItemsBasics extends Component {

render() {

return (

View>

) ;
}
}

const styles = StyleSheet.create({

container:{

flex: 1,

flexDirection: ‘ column ‘, / / set elements horizontally ` .

justifyContent: ‘ center ‘,

alignItems: ‘ stretch ‘,

} ,

powderblue:{

width: 60,

height: 60,

backgroundColor: ‘ powderblue ‘

} ,

skyblue:{

width: 60,

height: 60,

backgroundColor: ‘ skyblue ‘,

} ,

steelblue:{

/ * width : 60, * /

height: 60,

backgroundColor: ‘ steelblue ‘,

}
} )

OutputChú ý : Kéo dãn sẽ không có công dụng nếu thành phần con có một chiều khoảng trống cố định và thắt chặt theo trục phụ. Trong ví dụ trên, alignItems : stretch sẽ không có công dụng nếu tất cả chúng ta không vô hiệu width : 50 .

Phần 7: Đặt vị trí phần tử với Flex

Trong bài trước về Layout và Flexbox, tất cả chúng ta đã đàm đạo về Flexbox và những property của nó. Trong bài này, tất cả chúng ta sẽ đặt vị trí của những thành phần với Flex .

Ví dụ 1

Tạo một thành phần View và đặt 2 phần tử TextInput và Button. Thành phần View với flex property (1) sẽ chiếm hết không gian của thiết bị. Phần tử TextInput và Button được đặt ở default flex axis (như một cột).

import React, { Component } from ” react “;

import { StyleSheet, TextInput, View, Button } from ” react-native “;

export default class App extends Component {

state = {

placeName: ” “,

places: []

} ;

placeNameChangedHandler = val => {

this.setState({

placeName: val

} ) ;
} ;

placeSubmitHandler = () => {

alert(” button clicked “)

} ;

render() {

return (

placeholder=” An awesome place “

onChangeText={ this.placeNameChangedHandler}

style={styles.placeInput}

/ >

title=” Button “

onPress={ this.placeSubmitHandler}

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

padding: 26,

backgroundColor: ” # fff “,

justifyContent: ” flex-start “

}
} ) ;

Output :Ví dụ 2

Trong ví dụ này chúng ta sẽ đặt phần tử Button ở phía bên phải của phần tử TextInput. Thêm một thành phần con View vào trong thành phần cha View với flex: 1 và flexDirtection : "row". Đặt flex: 1 để View bên trong chiếm toàn bộ không gian từ trên xuống dưới và từ trái sang phải. flexDirtection: "row" đặt các phần tử theo hàng trong thành phần View ở phía bên trong.

import React, { Component } from ” react “;

import { StyleSheet, View, TextInput, Button } from ” react-native “;

export default class App extends Component {

state = {

placeName: ” “,

places: []

} ;

placeNameChangedHandler = val => {

this.setState({

placeName: val

} ) ;
} ;

placeSubmitHandler = () => {

alert(” button clicked “)

} ;

render() {

return (

placeholder=” An awesome place “

onChangeText={ this.placeNameChangedHandler}

/ >

title=” Button “

onPress={ this.placeSubmitHandler}

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

padding: 26,

backgroundColor: ” # fff “,

justifyContent: ” flex-start “

} ,

innerContainer:{

flex: 1,

flexDirection: ” row “

}
} ) ;

flex:1 để View phía bên trong chiếm toàn bộ không gian trông sẽ không đẹp mắt như để TextInput và Button chiếm toàn bộ không gian từ trên xuống dưới.Output : để View phía bên trong chiếm hàng loạt khoảng trống trông sẽ không thích mắt như để TextInput và Button chiếm hàng loạt khoảng trống từ trên xuống dưới .Ví dụ 3

Trong ví dụ này, chúng ta sẽ loại bỏ flex property của View phía bên trong và thêm width: 100%. Loại bỏ flex từ View phía bên trong sẽ đặt chiều không gian mặc định của các phần tử. Đặt width :"100%" để View phía bên trong chiếm trọn chiều ngang và chiều cao mặc định của các phần tử.

import React, { Component } from ” react “;

import { StyleSheet, View, TextInput, Button } from ” react-native “;

export default class App extends Component {

state = {

placeName: ” “,

places: []

} ;

placeNameChangedHandler = val => {

this.setState({

placeName: val

} ) ;
} ;

placeSubmitHandler = () => {

alert(” button clicked “)

} ;

render() {

return (

placeholder=” An awesome place “

onChangeText={ this.placeNameChangedHandler}

style={styles.textStyle}

/ >

title=” Button “

onPress={ this.placeSubmitHandler}

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

padding: 26,

backgroundColor: ” # fff “,

justifyContent: ” flex-start “

} ,

innerContainer:{

/ / flex : 1 ,

width: ” 100 % “,

flexDirection: ” row “,

justifyContent: ” space-between “,

alignItems: ” center “

} ,

textStyle:{

width: ” 70 % “,

backgroundColor: ” gray “,

} ,

buttonStyle:{

width: ” 30 % “,

}
} ) ;

Output :

Phần 8 : React Native ScrollView

ScrollView là một container thông thường có thể cuộn được, và có thể cuộn được nhiều thành phần con và view bên trong nó. Trong ScrollView, chúng ta có thể cuộn các thành phần theo chiều dọc and và chiều ngang. Mặc định, ScrollView container cuộn các thành phần và view của nó theo chiều dọc Để cuộn các thành phần theo chiều ngang, nó sử dụng các prop horizontal: true (mặc định, horizontal: false).

Các Props của ScrollView

alwaysBounceVertical	onScroll	horizontal
contentContainerStyle	scrollEnabled	bouncesZoom	zoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollEndDrag	centerContent	contentInset	refreshControl
pagingEnabled	scrollsToTop	snapToAlignment	showsHorizontalScrollIndicator
snapToStart	snapToEnd	indicatorStyle	showsHorizontalScrollIndicator

Ví dụ về React Native ScrollView

Trong ví dụ này, Chúng ta sẽ tạo ScrollView theo chiều dọc sử dụng các thành phần Text và Button.

App.js

import React, { Component } from ‘ react ‘;

import { AppRegistry, ScrollView, Image, Text, Button, StyleSheet } from ‘ react-native ‘;

export default class ScrolledViewExample extends Component {

onPressButton() {

alert(‘ You clicked the button ! ‘)

}

render() {

return (

Scroll me plz

Text>

Cách khác để viết điều này sẽ là

GotoProfile

The other way to write this would be:

{document.location.href=” profile.html “; } } >GotoProfile

a>Điều hướng sang trang mới

Có thể điều hướng từ trang này sang trang khác bằng những cách khác nhau :
1 .

2. title=” Go to URL “

3. onPress={() => this.props.navigation.navigate(‘ url ‘) }

4. / >

App. js

import React from ‘ react ‘;

import { View, Text, Button } from ‘ react-native ‘;

import { createStackNavigator, createAppContainer } from ‘ react-navigation ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

title=” Go to Profile “

onPress={() => this.props.navigation.navigate(‘ Profile ‘)}

/ >

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

View>

) ;
}
}

const AppNavigator = createStackNavigator(

{

trang chủ: HomeScreen,

Profile: ProfileScreen

} ,
{

initialRouteName: ” trang chủ “

}
) ;

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {

render() {

return ;

}
}

Thêm một thành phần Button trong 'HomeScreen' và thực hiện một hành động onPress{} để gọi hàm this.props.navigation.navigate('Profile'). Click vào thành phần Button sẽ di chuyển trang đến layout ‘ProfileScreen’.

import React from ‘ react ‘;

import { View, Text, Button } from ‘ react-native ‘;

import { createStackNavigator, createAppContainer } from ‘ react-navigation ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

title=” Go to Profile “

onPress={() => this.props.navigation.navigate(‘ Profile ‘)}

/ >

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

View>

) ;
}
}

const AppNavigator = createStackNavigator(

{

trang chủ: HomeScreen,

Profile: ProfileScreen

} ,
{

initialRouteName: ” trang chủ “

}
) ;

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {

render() {

return ;

}
}

Output :

this.props.navigation: navigation prop được truyền với tất cả các thành phần screen trong điều hướng stack.
navigate(‘Profile’): Gọi hàm navigate với tên tuyến mà chúng ta muốn chuyển đến.

Điều hướng đến một trang tuyến nhiều lần

Thêm điều hướng 'ProfileScreen' đến 'Profile' URL sẽ không thay đổi gì bởi chúng ta đã ở tuyến Profile.

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

title=” Go to Profile “

onPress={() => this.props.navigation.navigate(‘ Profile ‘)}

/ >

View>

) ;
}
}

Để gọi trang Profiles, hầu hết là trong trường hợp truyền những tài liệu độc nhất ( những tham số ) đến mỗi tuyến. Để thực thi, tất cả chúng ta sẽ truyền điều hướng đến push. Phương thức Navigate push biểu lộ dự tính thêm một tuyến bất kể lịch sử vẻ vang điều hướng hiện tại .

title=” Go to Profile “

onPress={() => this.props.navigation.push(‘ Profile ‘)}

/ >

Khi nhấn nút tất cả chúng ta sẽ gọi phương pháp push mỗi lần và thêm một tuyến mới vào stack điều hướng .

Quay lại

Tiêu đề của stack navigator tự động có một nút quay lại khi có thể quay lại từ trang hiện tại. Điều hướng stack của trang đơn sẽ không có nút quay lại bởi sẽ không có gì để chúng ta có thể quay lại
Đôi khi, chúng ta sẽ phải lập trình để thiếp lập hành vi quay lại, chúng ta sẽ gọi đây là hàm this.props.navigation.goBack();.

App.js

import React from ‘ react ‘;

import { View, Text, Button } from ‘ react-native ‘;

import { createStackNavigator, createAppContainer } from ‘ react-navigation ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

title=” Go to Profile “

onPress={() => this.props.navigation.push(‘ Profile ‘)}

/ >

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

title=” Go to Profile … again “

onPress={() => this.props.navigation.push(‘ Profile ‘)}

/ >

title=” Go to Home “

onPress={() => this.props.navigation.navigate(‘ trang chủ ‘)}

/ >

title=” Go back “

onPress={() => this.props.navigation.goBack()}

/ >

View>

) ;
}
}

const AppNavigator = createStackNavigator(

{

trang chủ: HomeScreen,

Profile: ProfileScreen

} ,
{

initialRouteName: ” trang chủ “

}
) ;

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {

render() {

return ;

}
}

Output :

4. Truyền giá trị giữa những trang

Khi tạo một ứng dụng nhiều trang thì đôi khi yêu cầu cần phải truyền giá trị giữa trang này và trang khác. Chúng ta có thể thực hiện điều này sử dụng hàm this.props.navigation.navigate().

Hàm này được sử dụng để điều hướng giữa các trang khác nhau.
Trước khi đi vào ví dụ, bạn cần phải đọc qua phần React Native Navigation.

Ví dụ

Trong ví dụ này, chúng ta sẽ nhập giá trị vào trang đầu tiên và đưa nó vào trang thứ hai.

Giá trị (tham số) được truyền như một đối tượng trong trang thứ nhất đến hàm navigation.navigate :

this.props.navigation.navigate ( ' RouteName ', { / * params go here * / } )

Cùng một giá trị ( tham số ) được đọc trong trang thứ hai như sau :

this.props.navigation. getParam ( paramName, defaultValue )

Tạo một tệp HomeScreen. js và thêm một thành phần TextInput để nhập giá trị và một Button để gửi. Thành phần TextInput có một onChangeText prop mà cần một hàm để gọi mỗi khi văn bản đổi khác .

HomeScreen.js

import React from ‘ react ‘;

/ / import react in our code .

import { StyleSheet, View, Button, TextInput } from ‘ react-native ‘;

export default class HomeScreen extends React.Component {

constructor(props) {

/ / constructor to set default state

super(props);

this.state = {

username: ‘ ‘,

} ;
}

static navigationOptions = {

title: ‘ trang chủ ‘,

headerStyle: {

backgroundColor: ‘ # f4511e ‘,

} ,

/ / headerTintColor : ‘ # 0 ff ‘ ,

headerTitleStyle: {

fontWeight: ‘ bold ‘,

} ,
} ;

render() {

const { navigate } = this.props.navigation;

return (

/ / View to hold our multiple components

{/ * Input to get the value from the user * /}

value={ this.state.username}

onChangeText={username => this.setState({ username })}

placeholder={‘ Enter Any value ‘}

style={styles.textInput}

/ >

title=” Submit “

/ / color = ” # 00B0 FF “

onPress={() =>

this.props.navigation.navigate(‘ Profile ‘, {

userName: this.state.username,

otherParam: ‘ 101 ‘,

} )

}

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: ‘ # fff ‘,

alignItems: ‘ center ‘,

padding: 16,

} ,

textInput: {

height: 45,width: ” 95 % “,borderColor: ” gray “,borderWidth: 1,fontSize:20,

} ,

buttonStyle:{

width: ” 93 % “,

marginTop: 50,

backgroundColor: ” red “,

}
} ) ;

Trong code trên userName: this.state.username, trữ giá trị nhập vào thành phần TextInput và otherParam: '101' trực tiếp chỉ định một giá trị. Khi click vào nút, userName và otherParam được truyền đến trang Profile.

ProfileScreen.js

Trong trang này, chúng ta nhân giá trị của userName và otherParam sử dụng navigation.getParam('paramValue', default value) và lần lượt lưu trữ vào đối tượng user_name và other_param. Giá trị của đối tượng JavaScript được chuyển đổi sang chuỗi sử dụng hàm JSON.stringify(object).

import React from ‘ react ‘;

import { StyleSheet, View, Text, Button } from ‘ react-native ‘;

export default class ProfileScreen extends React.Component {

static navigationOptions = {

title: ‘ Profile ‘,

headerStyle: {

backgroundColor: ‘ # f4511e ‘,

} ,

/ / headerTintColor : ‘ # 0 ff ‘ ,

headerTitleStyle: {

fontWeight: ‘ bold ‘,

} ,
} ;

render() {

{/ * Using the navigation prop we can get the

value passed from the previous màn hình hiển thị * /}

const { navigation } = this.props;

const user_name = navigation.getParam(‘ userName ‘, ‘ NO-User ‘);

const other_param = navigation.getParam(‘ otherParam ‘, ‘ some default value ‘);

return (

This is Profile Screen and we receive value from Home Screen

Text>

User Name: {JSON.stringify(user_name)}

Text>

Other Param: {JSON.stringify(other_param)}

Text>

title=” Go back “

onPress={() => this.props.navigation.goBack()}

/ >

View>

) ;
}
}

const styles = StyleSheet.create({

textStyle: {

fontSize: 23,

textAlign: ‘ center ‘,

color: ‘ # f00 ‘,

} ,

buttonStyle:{

width: ” 93 % “,

marginTop: 50,

backgroundColor: ” red “,

}
} ) ;
App. js

Tạo tệp App. js là điểm mở màn của ứng dụng và import HomeScreen và ProfileScreen. HomeScreen được đặt là trang tiên phong sử dụng initialRouteName .

1. import React from ‘ react ‘;

2. import {createStackNavigator,createAppContainer} from ‘ react-navigation ‘;

3. import HomeScreen from ‘. / HomeScreen ‘;

4. import ProfileScreen from ‘. / ProfileScreen ‘;

6. const AppNavigator = createStackNavigator(

7. {

8 .trang chủ : HomeScreen,

9 .Profile : ProfileScreen

10. },

11. {

12 .initialRouteName : ” trang chủ “

13. }

14. );

15. export default createAppContainer(AppNavigator);

Output :

Chúng ta cũng gửi và nhận các tham số thành JSON chẳng hạn như:Chúng ta cũng gửi và nhận những tham số thành JSON ví dụ điển hình như :

HomeScreen.js

onPress={() =>

navigate(‘ Profile ‘, {

JSON_ListView_Clicked_Item: this.state.username,

} )
}

ProfileScreen. js

Trong này đọc giá trị theo 2 cách mà không kiểm tra .

{ this.props.navigation.state.params. JSON_ListView_Clicked_Item }

Hoặc kiểm tra giá trị nhập vào có phải là rỗng ( null ) hay không

{this.props.navigation.state.params.JSON_ListView_Clicked_Item

? this.props.navigation.state.params.JSON_ListView_Clicked_Item

: ‘ No Value Passed ‘}

{this.props.navigation.state.params.JSON_ListView_Clicked_Item}

Text>

With Check

Text>

{/ * If you want to check the value is passed or not ,

you can use conditional operator. * /}

{this.props.navigation.state.params.JSON_ListView_Clicked_Item

? this.props.navigation.state.params.JSON_ListView_Clicked_Item

: ‘ No Value Passed ‘}

Output :

5. Điều hướng Tab

Điều hướng Tab là kiểu điều hướng phổ biến nhất trong các ứng dụng di động. Điều hướng Tab được gắn ở cuối trang hoặc ở đầu trang bên dưới phần tiêu đề hoặc đôi khi chính là phần tiêu đề. Nó được sử dụng để chuyển qua lại giữa các trang tuyến.
Để tạo điều hướng Tab, trước tiên chúng ta import createBottomTabNavigator và createAppContainer và trong các hàm gốc của thư viện react-navigation.

Tùy chỉnh Bottom Tab Navigator

Có nhiều prop hoàn toàn có thể tùy chỉnh được của BottomTabNavigator. Một trong số đó hoàn toàn có thể kể đến :

Prop	Mô tả
initialRouteName	Định nghĩa tuyến tab tiên phong khi ứng dụng khởi động .
order	Là một mảng của trang tuyến, dùng để sắp xếp thứ tự của những tab .
paths	Cung cấp sơ đồ của những trang tuyến đến path config mà sẽ ghi đè lên những đường dẫn được đặt trong routeConfigs .
lazy	Đặt là { true } thì sẽ render tab khi tab hoạt động giải trí lần đầu. Nếu đặt là false, toàn bộ những tab đều được render ngay lập tức. Giá trị mặc định là true .
tabBarComponent	Nó đè lên những thành phần, được sử dụng làm thanh tab. Không bắt buộc phải sử dụng .
tabBarOptions	Là một đối tượng người tiêu dùng của những property sau : activeTintColor, activeBackgroundColor, inactiveTintColor, inactiveBackgroundColor, showLabel, showIcon, style, labelStyle, tabStyle, allowFontScaling .

Ví dụ về điều hướng Tab

Tạo 2 lớp tên là HomeScreen và ProfileScreen. Đăng kí các lớp này trong hàm createBottomTabNavigator function lần lượt với Home và Profile tab.

import React from ‘ react ‘;

import { StyleSheet, Text, View } from ‘ react-native ‘;

import { createBottomTabNavigator, createAppContainer } from ‘ react-navigation ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

View>

) ;
}
}

const TabNavigator = createBottomTabNavigator({

trang chủ: HomeScreen,

Profile: ProfileScreen,

} ) ;

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘

} ,
} ) ;

export default createAppContainer(TabNavigator);

Nếu chúng ta đặt initialRouteName: "Profile" thì nó sẽ tải "ProfileScreen" là tuyến tab ban đầu.Output : Nếu tất cả chúng ta đặtthì nó sẽ tảilà tuyến tab khởi đầu .

const TabNavigator = createBottomTabNavigator({

trang chủ: HomeScreen,

Profile: ProfileScreen,

} ,
{

initialRouteName: ” Profile “

}
) ;

5. Thêm hình tượng vào bên dưới điều hướng Tab

Trong phần này, tất cả chúng ta sẽ thêm những hình tượng vào bên dưới điều hướng Tab. Trước khi đi vào phần này, hãy đọc lại phần Điều hướng Tab để biết cách cài đặt Điều hướng Tab cuối trang .

Ví dụ

Đầu tiên, thêm các thư viện và phần phụ thuộc cần thiết vào dự án React Native:
1. Thêm thư viện react navigation với lệnh sau:

yarn add react-navigation

2. Thêm thư viện react native gesture handler với lệnh sau :

yarn add react-native-gesture-handler

3. Thêm thư viện react native vector icons với lệnh sau :

yarn add react-native-vector-icons

Sau khi đã thực thi thành công xuất sắc những lệnh trên, link những thư viện này đến dự án Bất Động Sản react native với lệnh sau :

react-native link

Lệnh trên hãy thêm các phần phụ thuộc dưới đây vào tệp D:\your_directory\your_reactNativeProject\package.json file.

" react-native-gesture-handler " : " ^ 1.1.0 " ,
" react-native-vector-icons " : " ^ 6.3.0 " ,
" react-navigation " : " ^ 3.3.2 "

D : \ your_directory \ your_reactNativeProject \ android \ app \ build.gragle

implementation project ( ' : react-native-vector-icons ' )
implementation project ( ' : react-native-gesture-handler ' )

D : \ your_directory \ your_reactNativeProject \ android \ settings.gradle file :

include ‘ : react-native-vector-icons ‘

project(‘ : react-native-vector-icons ‘).projectDir = new File(rootProject.projectDir, ‘ ..\ node_modules\ react-native-vector-icons\ android ‘)

include ‘ : react-native-gesture-handler ‘

project(‘ : react-native-gesture-handler ‘).projectDir = new File(rootProject.projectDir, ‘ ..\ node_modules\ react-native-gesture-handler\ android ‘)

Thực hiện một chút ít biến hóa ( sửa chữa thay thế ‘ \ ‘ bằng ‘ / ‘ ) trong cấu trúc tuyến đường ở trên như :

include ‘ : react-native-vector-icons ‘

project(‘ : react-native-vector-icons ‘).projectDir = new File(rootProject.projectDir, ‘ .. / node_modules / react-native-vector-icons / android ‘)

include ‘ : react-native-gesture-handler ‘

project(‘ : react-native-gesture-handler ‘).projectDir = new File(rootProject.projectDir, ‘ .. / node_modules / react-native-gesture-handler / android ‘)

D:\your_directory\your_reactNativeProject\android\app\src\main\java\com\ reactNativeProject\MainApplication.java

import com.oblador.vectoricons.VectorIconsPackage;

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;

.. .

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new VectorIconsPackage(),

new RNGestureHandlerPackage()

) ;
}
App. js

Tạo 2 lớp "HomeScreen" và "ProfileScreen" lần lượt cho 2 tab "Home" và "Profile". Hàm createBottomTabNavigator tạo một thanh tab bên dưới trang để bạn có thể chuyển qua lại giữa các tuyến khác nhau.
Đặt "HomeScreen" vào tiêu đề "Home" và "ProfileScreen" vào tiêu đề "Profile". Thẻ Icon thêm các biểu tượng vào điều hướng tab. Chúng ta có thể sử dụng các tên biểu tượng khác nhau trên ionicons.com

import React from ‘ react ‘;

import {StyleSheet, Text, View} from ‘ react-native ‘;

import { createBottomTabNavigator, createAppContainer } from ‘ react-navigation ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

View>

) ;
}
}

const TabNavigator = createBottomTabNavigator(

{

trang chủ:{

màn hình hiển thị:HomeScreen,

navigationOptions:{

tabBarLabel:’ trang chủ ‘,

tabBarIcon:({tintColor})=>(

)
}
} ,

Profile: {

màn hình hiển thị:ProfileScreen,

navigationOptions:{

tabBarLabel:’ Profile ‘,

tabBarIcon:({tintColor})=>(

)
}
} ,
} ,
{

initialRouteName: ” trang chủ “

} ,
) ;

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘

} ,
} ) ;

export default createAppContainer(TabNavigator);

Output :

6. Tạo Material Bottom Tab Navigator

Kiểu vật liệu (material style) cung cấp thêm hiệu ứng thiết kế cho thanh tab ở phía dưới màn hình. Các thiết kế sẽ khiến bạn chú ý đến các tab phía bên dưới hơn. Các thành phần của trang tab sẽ không được đặt lên cho đến khi các trang được tập trung vào lần đầu.

Để sử dụng material design navigator, cài đặt thư viện react-navigation-material-bottom-tabs như sau:

npm install react-navigation-material-bottom-tabs react-native-paper

Thư viện này sử dụng thành phần BottomNavigation từ react-native-paper.
Nó cũng yêu cầu cần phải cài react-native-vector-icons.

createMaterialBottomTabNavigator ( RouteConfigs, MaterialBottomTabNavigatorConfig ) ;

Ví dụ

Trong ví dụ này, chúng ta sẽ cài đặt material bottom tab navigator để làm nổi bật biểu tượng của tab đang hoạt động và tiêu đề của nó. Các tab còn lại sẽ chỉ hiển thị biểu tượng mà không có tiêu đề. Để sử dụng các các thiết kế vật liệu, import hàm createMaterialBottomTabNavigator từ thư viện react-navigation-material-bottom-tabs.

App. js

import React from ‘ react ‘;

import {StyleSheet, Text, View,Button} from ‘ react-native ‘;

import { createBottomTabNavigator, createAppContainer} from ‘ react-navigation ‘;

import { createMaterialBottomTabNavigator } from ‘ react-navigation-material-bottom-tabs ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

class HomeScreen extends React.Component {

render() {

return (

Home Screen

Text>

View>

) ;
}
}

class ProfileScreen extends React.Component {

render() {

return (

Profile Screen

Text>

View>

) ;
}
}

class ImageScreen extends React.Component {

render() {

return (

Image Screen

Text>

View>

) ;
}
}

class CartScreen extends React.Component {

render() {

return (

Cart Screen

Text>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘

} ,
} ) ;

const TabNavigator = createMaterialBottomTabNavigator(

{

trang chủ: { màn hình hiển thị: HomeScreen,

navigationOptions:{

tabBarLabel:’ trang chủ ‘,

tabBarIcon: ({ tintColor }) => (

View>),

}
} ,

Profile: { màn hình hiển thị: ProfileScreen,

navigationOptions:{

tabBarLabel:’ Profile ‘,

tabBarIcon: ({ tintColor }) => (

View>),

activeColor: ‘ # f60c0d ‘,

inactiveColor: ‘ # f65a22 ‘,

barStyle: { backgroundColor: ‘ # f69b31 ‘ },

}
} ,

Image: { màn hình hiển thị: ImageScreen,

navigationOptions:{

tabBarLabel:’ History ‘,

tabBarIcon: ({ tintColor }) => (

View>),

activeColor: ‘ # 615 af6 ‘,

inactiveColor: ‘ # 46 f6d7 ‘,

barStyle: { backgroundColor: ‘ # 67 baf6 ‘ },

}
} ,

Cart: {

màn hình hiển thị: CartScreen,

navigationOptions:{

tabBarLabel:’ Cart ‘,

tabBarIcon: ({ tintColor }) => (

View>),

}
} ,
} ,
{

initialRouteName: ” trang chủ “,

activeColor: ‘ # f0edf6 ‘,

inactiveColor: ‘ # 226557 ‘,

barStyle: { backgroundColor: ‘ # 3BAD87 ‘ },

} ,
) ;

export default createAppContainer(TabNavigator);

Output :

7. React Native Top Tab Navigator ( createMaterialTopTabNavigator )

Kiểu vật liệu createMaterialTopTabNavigator dược dùng để tạo tab navigator ở trên đầu trang. Nó cung cấp chức năng tạo và hiển thị nhiều bộ định tuyến trang. Các trang này đươc chuyển qua lại lẫn nhau bằng cách gõ nhẹ vào tuyến hoặc vuốt theo chiều ngang. Các thành phần tab screen sẽ được đặt lên khi chúng được tập trung vào.

Hàm createMaterialTopTabNavigator của thư viện react-navigation giúp chúng ta sễ dàng cài đặt top tab navigator:

createMaterialTopTabNavigator ( RouteConfigs, TabNavigatorConfig ) ;

Ví dụ
"Home", "Profile" và "Settings" . Mỗi trang định tuyến sẽ được tạo trong các tệp riêng.

Cấu trúc thư mục của ứng dụng

Tạo một thư mục src trong dự án tuyến của bạn. Bên trong thư mục src tạo một tệp index.js và 2 thư mục khác là lib và screens. Trong thư mục screens, chúng ra sẽ đặt 3 tệp của trang đó là index.js (HomeScreen), profile.js (ProfileScreen), và settings.js (SettingsScreen). Trong thư mục lib, chúng ta cài đặt createMaterialTopTabNavigator để tạo top tab navigator.

topNavigation/index.js

Thay đổi một chút trong tệp topNavigation/index.js (thay './App' bằng './src').Hãy tạo một top tab navigator với thanh trạng thái và phần tiêu đề tùy chọn. Trong ví dụ này, Chúng ta sẽ tạo 3 trang khác nhau cho những bộ định tuyếnvà. Mỗi trang định tuyến sẽ được tạo trong những tệp riêng. Cấu trúc thư mục của ứng dụngTạo một thư mục src trong dự án Bất Động Sản tuyến của bạn. Bên trong thư mục src tạo một tệp index.js và 2 thư mục khác là lib và screens. Trong thư mục screens, chúng ra sẽ đặt 3 tệp của trang đó là index.js ( HomeScreen ), profile.js ( ProfileScreen ), và settings.js ( SettingsScreen ). Trong thư mục lib, tất cả chúng ta cài đặtđể tạo top tab navigator. Thay đổi một chút ít trong tệp ( thaybằng ) .

import {AppRegistry} from ‘ react-native ‘;

import App from ‘. / src ‘;

import {name as appName} from ‘. / app.json ‘;

AppRegistry.registerComponent(appName, () => App);

Tạo 3 lớp và import Icon từ package 'react-native-vector-icons/Ionicons'. Cài đặt tabBarIcon và thêm thẻ Icon vào nó.

src/screens/index.js

import React, {Component} from ‘ react ‘;

import {View,Text} from ‘ react-native ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

export default class HomeScreen extends Component{

render() {

return(

This is Home Screen

Text>

View>

)
}
}

HomeScreen.navigationOptions={

tabBarIcon:({tintColor, focused})=>(

name={focused ? ‘ ios-home ‘ : ‘ md-home ‘}

color={tintColor}

size={25}

/ >

)
}

src / screens / profile.js

import React, {Component} from ‘ react ‘;

import {View,Text} from ‘ react-native ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

export default class ProfileScreen extends Component{

render(){

return(

this is profile screen

Text>

View>

)
}
}

ProfileScreen.navigationOptions={

tabBarIcon:({tintColor, focused})=>(

name={focused ? ‘ ios-person ‘ : ‘ md-person ‘}

color={tintColor}

size={25}

/ >

)
}

src / screens / settings.js

import React, {Component} from ‘ react ‘;

import {View,Text} from ‘ react-native ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

export default class SettingScreen extends Component{

render(){

return(

this is setting screen

Text>

View>

)
}
}

SettingScreen.navigationOptions={

tabBarIcon:({tintColor, focused})=>(

name={focused ? ‘ ios-settings ‘ : ‘ md-settings ‘}

color={tintColor}

size={25}

/ >

)
}

src/lib/router.js

Trong tệp router.js, import các hàm createMaterialTopTabNavigator và createAppContainer của thư viện ‘react-navigation’. Import tất cả các lớp định tuyến trong nó và đặt chúng theo trình tự mà chúng ta muốn hiển thị trên đầu tab navigator.

activeTintColor: đặt màu đề cập cho bộ định tuyến đang hoạt động.
showIcon: hiển thị {true} và ẩn {false} biểu tượng bộ định tuyến.
showLabel: hiển thị {true} và ẩn {false} tiêu đề của bộ định tuyến. Theo mặc định, nó là true.

import React from ‘ react ‘;

import {createMaterialTopTabNavigator,createAppContainer} from ‘ react-navigation ‘;

import HomeScreen from ” .. / screens / index “;

import ProfileScreen from ” .. / screens / profile “;

import SettingScreen from ” .. / screens / settings “;

const AppNavigator = createMaterialTopTabNavigator(

{

trang chủ: HomeScreen,

Profile: ProfileScreen,

Settings: SettingScreen,

} ,
{

tabBarOptions: {

activeTintColor: ‘ white ‘,

showIcon: true,

showLabel:false,

style: {

backgroundColor:’ red ‘

}
} ,
}
)

export default createAppContainer(AppNavigator);

src/index.js

Import AppNavigator từ './lib/router' và chỉ định AppNavigator vào một hằng số AppIndex trong tệp này. Tùy biến thanh trạng thái sử dụng thẻ StatusBar và thêm phần tiêu đề vào trên đầu của tab navigator.

import React, {Component} from ‘ react ‘;

import {StyleSheet, Text, View,StatusBar} from ‘ react-native ‘;

import {createAppContainer} from ‘ react-navigation ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

import AppNavigator from ‘. / lib / router ‘;

const AppIndex = createAppContainer(AppNavigator)

export default class App extends Component{

render(){

return(

backgroundColor=’ red ‘

barStyle=’ light-content ‘

/ >

View>

)
}
}

const styles = StyleSheet.create({

wrapper: {

flex: 1,

} ,

header:{

flexDirection: ‘ row ‘,

alignItems: ‘ center ‘,

justifyContent: ‘ space-between ‘,

backgroundColor: ‘ red ‘,

paddingHorizontal: 18,

paddingTop: 5,

}
} ) ;

Output :

8. Điều hướng Ngăn kéo ( createDrawerNavigator )

React Native Drawer Navigation là một bảng UI hiển thị menu điều hướng của ứng dụng. Khi không sử dụng thì nó mặc định sẽ được ẩn đi, nó sẽ hiện ra khi người dùng vuốt ngón tay từ cạnh trang hay khi người dùng chạm vào biểu tượng ngăn kéo trên thanh ứng dụng.

React Native Drawer Navigation import createDrawerNavigator từ thư viện react-navigation:

import { createDrawerNavigator } from ' react-navigation '

Cài đặt createDrawerNavigator() để thêm danh sách các lớp (trang):

createDrawerNavigator ( RouteConfigs, DrawerNavigatorConfig ) ;

Để đóng và mở những ngăn kéo, sử dụng những phương pháp helper :

this.props.navigation. openDrawer ( ) ;
this.props.navigation. closeDrawer ( ) ;

Nếu bạn muốn bật / tắt ngăn kéo thì hoàn toàn có thể gọi phương pháp sau :

this.props.navigation. toggleDrawer ( ) ;

Mỗi một phương thức openDrawer(), closeDrawer(), và toggleDrawer() đơn giản là các hành động truyền đi như:

this.props.navigation.dispatch ( DrawerActions. openDrawer ( ) ) ;
this.props.navigation.dispatch ( DrawerActions. closeDrawer ( ) ) ;
this.props.navigation.dispatch ( DrawerActions. toggleDrawer ( ) ) ;

Ví dụ

Tạo 2 lớp riêng biệt "DashboardScreen" và "WelcomeScreen" trong ứng dụng react native để hiển thị trên trang. Thêm các trang này vào createStackNavigator và thêm biểu tượng "md-menu" của package 'react-native-vector-icons/Ionicons'. Khi nhấn vào biểu tượng menu, gọi phương thức navigation.openDrawer() để mở ngăn kéo.
Bây giờ, hãy import createDrawerNavigator từ package 'react-navigation' và cài đặt createDrawerNavigator(). Sau đó hãy thêm trang điều hướng stack lên trên nó.

import React, { Component } from ‘ react ‘;

import { View, Text, StyleSheet, Button } from ‘ react-native ‘;

import Icon from ‘ react-native-vector-icons / Ionicons ‘;

import {

createSwitchNavigator,

createAppContainer,

createDrawerNavigator,

createStackNavigator

} from ‘ react-navigation ‘;

export default class App extends Component {

render() {

return ;

}
}

class WelcomeScreen extends Component {

static navigationOptions = {

title : ‘ Welcome ‘,

} ;

render() {

return (

WelcomeScreen

Text>

title=” Go to DashboardScreen “

onPress={() => this.props.navigation.navigate(‘ Dashboard ‘)}

/ >

View>

) ;
}
}

class DashboardScreen extends Component {

static navigationOptions = {

title : ‘ Dashboard ‘,

} ;

render() {

return (

DashboardScreen

Text>

View>

) ;
}
}

const DashboardStackNavigator = createStackNavigator(

{

DashboardNavigator: DashboardScreen

} ,
{

defaultNavigationOptions: ({ navigation }) => {

return {

headerLeft: (

style={{ paddingLeft: 10 }}

onPress={() => navigation.openDrawer()}

name=” md-menu “

size={30}

/ >

)
} ;
}
}
) ;

const WelcomeStackNavigator = createStackNavigator(

{

WelcomeNavigator: WelcomeScreen

} ,
{

defaultNavigationOptions: ({ navigation }) => {

return {

headerLeft: (

style={{ paddingLeft: 10 }}

onPress={() => navigation.openDrawer()}

name=” md-menu “

size={30}

/ >

)
} ;
}
}
) ;

const AppDrawerNavigator = createDrawerNavigator({

Dashboard: {

màn hình hiển thị: DashboardStackNavigator

} ,

Welcome: {

màn hình hiển thị: WelcomeStackNavigator

} ,
} ) ;

const AppSwitchNavigator = createSwitchNavigator({

Dashboard: { màn hình hiển thị: AppDrawerNavigator },

Welcome: { màn hình hiển thị: WelcomeScreen },

} ) ;

const AppContainer = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({

container: {

flex: 1,

alignItems: ‘ center ‘,

justifyContent: ‘ center ‘

}
} ) ;

Output :

Phần 4 : Storage

1. React Native AsyncStorage

React Native AsyncStorage là một hệ thống lưu trữ đơn giản, không mã hóa, không đối xứng và liên tục, để lưu trữ dữ liệu trên toàn ứng dụng Nó lưu trữ dữ liệu dưới dạng cặp khóa-giá trị.

React Native khuyến khích sử dụng các trừu tượng ngoài AsyncStorage thay vì trực tiếp dùng AsyncStorage bởi nó hoạt động trên toàn ứng dụng.

Trên iOS, AsyncStorage được chấp nhận bởi code gốc. Code gốc của iOS lưu trữ các giá trị nhỏ trong một từ điển được tuần tự hóa và các giá trị lớn trong các tệp riêng.

Trong Android, AsyncStorage sẽ sử dụng SQLite hoặc RocksDB nếu có sẵn.
Để sử dụng AsyncStorage, import thư viện AsyncStorage như sau:

import { AsyncStorage } from ' react-native ' ;

Duy trì dữ liệu (persist data)

React Native AsyncStorage tàng trữ tài liệu sử dụng phương pháp setItem ( ) như sau :

AsyncStorage. setItem ( ' key ', ' value ' ) ;

Ví dụ duy trì một giá trị đơn :

let name = ” Michal “;

AsyncStorage.setItem(‘ user ‘,name);

Ví dụ duy trì nhiều giá trị trong một đối tượng:

let obj = {

name: ‘ Michal ‘,

email: ‘ [email protected] ‘,

city: ‘ Thành Phố New York ‘,

}

AsyncStorage.setItem(‘ user ‘,JSON.stringify(obj));

Lấy dữ liệu:

React Native AsyncStorage lấy những tài liệu được lưu sử dụng phương pháp getItem ( ) như sau :

await AsyncStorage. getItem ( ' key ' ) ;

Ví dụ lấy một giá trị đơn :

await AsyncStorage. getItem ( ' user ' ) ;

Ví dụ lấy nhiều giá trị từ một đối tượng người dùng :

let user = await AsyncStorage. getItem ( ' user ' ) ;
let parsed = JSON.parse ( user ) ;
alert ( parsed.email ) ;

React Native AsyncStorage Ví dụ 1

Trong ví dụ này, chúng ta sẽ tạo 2 thành phần TouchableOpacity, một để lưu và một để lấy dữ liệu. trong thành phần TouchableOpacity đầu tiên, gọi phương thức savaData() để lưu dữ liệu và từ thành phần TouchableOpacity thứ hai, gọi phương thức displayData() để lấy dữ liệu.

import React, {Component} from ‘ react ‘;

import {Platform, StyleSheet, Text,

View,TouchableOpacity, AsyncStorage,

} from ‘ react-native ‘;

export default class App extends Component {

saveData(){

let name = ” Michal “;

AsyncStorage.setItem(‘ user ‘,name);

}

displayData = async ()=>{

try{

let user = await AsyncStorage.getItem(‘ user ‘);

alert(user);

}

catch(error){

alert(error)

}
}

render() {

return (

Click to save data

Text>

TouchableOpacity>

Click to display data

Text>

TouchableOpacity>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘,

backgroundColor: ‘ # F5FCFF ‘,

} ,
} ) ;

Output :React Native AsyncStorage Ví dụ 2

Trong ví dụ này, chúng ta sẽ lưu nhiều giá trị trong form nếu đối tượng JSON sử dụng JSON.stringify(). JSON.stringify() lấy đối tượng JavaScript chuyển chúng thành chuỗi JSON. Mặt khác, phương thức JSON.parse() được dùng để lấy dữ liệu AsyncStorage. Phương thức này lấy chuỗi JSON và chuyển nó thành một đối tượng JavaScript trước khi chúng được trả về.

import React, {Component} from ‘ react ‘;

import {Platform, StyleSheet, Text,

View,TouchableOpacity, AsyncStorage,

} from ‘ react-native ‘;

export default class App extends Component {

saveData(){

/ * let user = ” Michal ” ; * /

let obj = {

name: ‘ Michal ‘,

email: ‘ [email protected] ‘,

city: ‘ Thành Phố New York ‘,

}

/ * AsyncStorage. setItem ( ‘ user ‘, user ) ; * /

AsyncStorage.setItem(‘ user ‘,JSON.stringify(obj));

}

displayData = async ()=>{

try{

let user = await AsyncStorage.getItem(‘ user ‘);

let parsed = JSON.parse(user);

alert(parsed.email);

}

catch(error){

alert(error)

}
}

render() {

return (

Click to save data

Text>

TouchableOpacity>

Click to display data

Text>

TouchableOpacity>

View>

) ;
}
}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘ center ‘,

alignItems: ‘ center ‘,

backgroundColor: ‘ # F5FCFF ‘,

} ,
} ) ;

Output :

2. Các phương pháp AsyncStorage

Có rất nhiều những phương pháp của lớp React Native AsyncStorage được miêu tả như ở dưới đây :

Các phương thức

setItem ( )

static setItem ( key : string, value : string, [ callback ] : ? ( error : ? Error ) => void )

Phương thức setItem() đặt giá trị của một key và gọi một callback khi biên dịch. Nó trả về một đối tượng Promise.
getItem()

static getItem ( key : string, [ callback ] : ? ( error : ? Error, result : ? string ) ) => void )

Phương thức getItem() lấy một item từ một key và gọi một callback khi hoàn thành. Nó trả về một đối tượng Promise.
removeItem()

static removeItem ( key : string, [ callback ] : ? ( error : ? Error ) => void )

Phương thức removeItem() loại bỏ một item cho một key và gọi một callback khi biên dịch. Nó trả về một đối tượng Promise.
mergeItem()

static mergeItem ( key : string, value : string, [ callback ] : ? ( error : ? Error ) => void )

Phương thức mergeItem() sáp nhập các giá trị của khóa với giá trị nhập và cho rằng cả 2 giá trị là JSON đã được chuỗi hóa. Nó trả về một đối tượng Promise.

Chú ý : Phương thức này không được tương hỗ bởi tổng thể những phiên bản native .

clear ( )

static clear ( [ callback ] : ? ( error : ? Error ) => void )

Phương thức clear() xóa bỏ tất cả các AsynchStorage từ các máy khách, thư viện, v..v.. Bạn không nên gọi phương thức này, thay vào đó bạn có thể sử dụng removeItem hoặc multiRemove để xóa các khóa của ứng dụng. Nó trả về một đối tượng Promise.

getAllKeys()

static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void)

Nó lấy tất cả các khóa của ứng dụng, cho tất cả các caller, thư viện, ..v..v.. Nó trả về một đối tượng Promise.
flushGetRequests()

static flushGetRequests ( ) : [ object Object ]

Nó flush bất kỳ yêu cầu đang chờ nào sử dụng một cuộc gọi hàng loạt để lấy dữ liệu.
multiGet()

static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void)

Phương thức này được cho phép bạn lấy hàng loạt những item được đưa ra trong một mảng những input khóa. Phương thức callback sẽ được gọi với một mảng những cặp khóa-giá trị tương ứng được tìm thấy :

multiGet ( [ ' k1 ', ' k2 ' ], cb ) -> cb ( [ [ ' k1 ', ' val1 ' ], [ ' k2 ', ' val2 ' ] ] )

Phương thức này trả về một đối tượng Promise.
multiSet()

static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void)

Phương thức này được sử dụng như một tiến trình giải quyết và xử lý hàng loạt để tàng trữ nhiều cặp khóa-giá trị. Sau khi giải quyết và xử lý xong bạn sẽ co một callback mà không có lỗi :

multiSet ( [ [ ' k1 ', ' val1 ' ], [ ' k2 ', ' val2 ' ] ], cb ) ;

Phương thức này trả về một đối tượng Promise.
multiRemove()

static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void)

Phương thức này gọi việc xóa hàng loạt tất cả các khóa trong mảng khóa. Nó trả về một đối tượng Promise.
multiMerge()

static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void)

Nó thực thi một tiến trình hàng loạt để sáp nhập những giá trị đang có với một bộ khóa được cho. Nó cho rằng những giá trị là JSON được chuỗi hóa. Nó trả về một đối tượng người tiêu dùng Promise .

4.Các ứng dụng với React Native

Sau khi đã học các kiến thức về framework thì việc tiếp theo bạn cần làm là gì? Đó là vận dụng những gì đã học được vào các dự án thực tế. Điều này không những củng cố thêm kiến thức mà còn giúp bạn trau dồi thêm các kỹ năng, phương pháp và các quy trình làm việc để trang bị hành trang sẵn sàng bước chân vào thị trường việc làm của ngành lập trình. Sau đây là một số các ứng dụng di động với React Native để bạn có thể thử sức mình

Ứng dụng trò chuyện

Nếu nói về ý tưởng cho ứng dụng React Native, thì sẽ không thể không nhắc đến ứng dụng trò chuyện. Hẳn là những ứng dụng như Whatsapp, Facebook Messenger, và Telegram thì không cần phải giới thiệu thêm rồi.

Những tính năng phải có của một ứng dụng trò chuyện cần có một giao diện trò chyện thời gian thực với một UI dễ dàng, hấp dẫn và có tính tương tác để người dùng mới có thể nhanh chóng hiểu được và tham gia trò chuyện mà không gặp bất kỳ khó khăn gì. Bạn nên thêm các mã hoá end-to-end để đảm bảo ưu tiên quyền riêng tư cho cuộc trò chuyện cùng với các tính năng khác như cho phép người dùng chia sẻ hình ảnh, link, video với những người dùng khác trong cuộc trò chuyện. Nếu nói về sáng tạo độc đáo cho ứng dụng React Native, thì sẽ không hề không nhắc đến ứng dụng trò chuyện. Hẳn là những ứng dụng như Whatsapp, Facebook Messenger, và Telegram thì không cần phải ra mắt thêm rồi. Những tính năng phải có của một ứng dụng trò chuyện cần có một giao diện trò chyện thời hạn thực với một UI thuận tiện, mê hoặc và có tính tương tác để người dùng mới hoàn toàn có thể nhanh gọn hiểu được và tham gia trò chuyện mà không gặp bất kể khó khăn vất vả gì. Bạn nên thêm những mã hoá end-to-end để bảo vệ ưu tiên quyền riêng tư cho cuộc trò chuyện cùng với những tính năng khác như được cho phép người dùng san sẻ hình ảnh, link, video với những người dùng khác trong cuộc trò chuyện .

Ứng dụng đọc sách

Ứng dụng đọc sách cũng là một trong những ứng dụng di động phổ biến hiện nay. E-book đã trở thành xu thế được một thời gian, nhưng sự có mặt của audiobook chính là thứ thu hút sự chú ý và là tính năng phải có trong ứng dụng của bạn. Với cuộc sống hàng ngày bận rộn và căng thẳng, audiobook đã trở thành một kiểu trị liệu thư giãn đang ngày càng trở nên phổ biến.

Một ứng dụng đọc sách được hỗ trợ bởi công nghệ React Native nên bao gồm các tính năng như thanh tìm kiếm, sử dụng bộ lọc để phân chia theo thể loại, các chi tiết về sách như tên tác giả, sơ lược nội dung, ..v..v.. và một vài tính năng nâng cao khác như đánh dấu sách, đánh giá của người đọc, chatroom để người đọc thảo luận và còn nhiều nữa. Các khả năng dường như là vô tận.Ứng dụng đọc sách cũng là một trong những ứng dụng di động thông dụng lúc bấy giờ. E-book đã trở thành xu thế được một thời hạn, nhưng sự xuất hiện của audiobook chính là thứ lôi cuốn sự chú ý quan tâm và là tính năng phải có trong ứng dụng của bạn. Với đời sống hàng ngày bận rộn và căng thẳng mệt mỏi, audiobook đã trở thành một kiểu trị liệu thư giãn giải trí đang ngày càng trở nên thông dụng. Một ứng dụng đọc sách được tương hỗ bởi công nghệ tiên tiến React Native nên gồm có những tính năng như thanh tìm kiếm, sử dụng bộ lọc để phân loại theo thể loại, những cụ thể về sách như tên tác giả, sơ lược nội dung, .. v .. v .. và một vài tính năng nâng cao khác như lưu lại sách, nhìn nhận của người đọc, chatroom để người đọc luận bàn và còn nhiều nữa. Các năng lực có vẻ như là vô tận .

Ứng dụng tin tức với âm thanh

Sẽ tuyệt vời làm sao nếu bạn có thể nghe tin tức thay vì đọc chúng. Đây là một ý tưởng tương tự như audiobook, ứng dụng tin tức bằng âm thanh đang khá là phát triển và nếu được khai thác tốt sẽ đem lại những tác động ấn tượng và trải nghiệm tốt cho người dùng. Một ứng dụng tin tức đơn giản lấy dữ liệu từ các trang và render dữ liệu tin tức lấy được từ các trang và các cổng thông tin vào ứng dụng của bạn.

Bước đầu tiên đó là xây dựng giao diện người dùng, hoàn thiện các phần tử thiết kế cho ứng dụng, tích hợp dữ liệu như tin tức khi người dùng click vào thì sẽ được điều hướng đến một trang để tải trang tin đó. Nhưng với sự hỗ trợ của các phần mềm âm thanh mã nguồn mở thì đó sẽ là thứ hoàn thiện ứng dụng của bạn. Các tính năng bạn có thể cài đặt bao gồm nhận dạng giọng nói và chuyển thành văn bản, tích hợp RestAP, thanh tìm kiếm, lọc tin tức theo chủ đề và tiêu đề, các reader plugin, và chế độ tối để cải thiện trải nghiệm người dùng.Sẽ tuyệt vời làm thế nào nếu bạn hoàn toàn có thể nghe tin tức thay vì đọc chúng. Đây là một sáng tạo độc đáo tựa như như audiobook, ứng dụng tin tức bằng âm thanh đang khá là tăng trưởng và nếu được khai thác tốt sẽ đem lại những ảnh hưởng tác động ấn tượng và thưởng thức tốt cho người dùng. Một ứng dụng tin tức đơn thuần lấy tài liệu từ những trang và render dữ liệu tin tức lấy được từ những trang và những cổng thông tin vào ứng dụng của bạn. Bước tiên phong đó là kiến thiết xây dựng giao diện người dùng, triển khai xong những thành phần phong cách thiết kế cho ứng dụng, tích hợp tài liệu như tin tức khi người dùng click vào thì sẽ được điều hướng đến một trang để tải trang tin đó. Nhưng với sự tương hỗ của những ứng dụng âm thanh mã nguồn mở thì đó sẽ là thứ triển khai xong ứng dụng của bạn. Các tính năng bạn hoàn toàn có thể setup gồm có nhận dạng giọng nói và chuyển thành văn bản, tích hợp RestAP, thanh tìm kiếm, lọc tin tức theo chủ đề và tiêu đề, những reader plugin, và chính sách tối để cải tổ thưởng thức người dùng .

Ứng dụng chơi nhạc

Cuộc sống sẽ thật buốn tẻ nếu thiếu đi các giai điệu và âm nhạc. Ứng dụng chơi nhạc là một trong số những ứng dụng React Native mà có thể phát triển trong một khoảng thời gian ngắn. Podcast cũng đang cực kì thịnh hành và có nhu cầu ngày càng tăng. Đây cũng sẽ là một lựa chọn rất phù hợp để tích hợp vào ứng dụng của bạn.

Nhưng chỉ có một UI hào nhoáng là chưa đủ, một ứng dụng chơi nhạc phải có các tính năng mượt mà và dễ dàng điều hướng như đặc trưng của ứng dụng React native. Các chức năng mà chắc chắn bạn nên tích hợp đó là danh sách bài hát dựa trên album, thể loại, phim, nghệ sĩ. Phát bài hát trực tiếp cùng với các chức năng chơi nhạc, tạm dừng, chế độ lặp lại, chế độ xáo trộn, và chia sẻ bài hát trên các mạng xã hội.Cuộc sống sẽ thật buốn tẻ nếu thiếu đi những giai điệu và âm nhạc. Ứng dụng chơi nhạc là một trong số những ứng dụng React Native mà hoàn toàn có thể tăng trưởng trong một khoảng chừng thời hạn ngắn. Podcast cũng đang cực kỳ phổ cập và có nhu yếu ngày càng tăng. Đây cũng sẽ là một lựa chọn rất tương thích để tích hợp vào ứng dụng của bạn. Nhưng chỉ có một UI hào nhoáng là chưa đủ, một ứng dụng chơi nhạc phải có những tính năng mềm mại và mượt mà và thuận tiện điều hướng như đặc trưng của ứng dụng React native. Các tính năng mà chắc như đinh bạn nên tích hợp đó là list bài hát dựa trên album, thể loại, phim, nghệ sĩ. Phát bài hát trực tiếp cùng với những tính năng chơi nhạc, tạm dừng, chính sách tái diễn, chính sách trộn lẫn, và san sẻ bài hát trên những mạng xã hội .

Ứng dụng shopping

Không có khi nào nào tốt hơn lúc này đề xây dựng một ứng dụng mua sắm. Đại dịch COVID-19 đã làm tăng tốc độ chuyển đổi sang mua sắm online. Các nghiên cứu chỉ ra rằng doanh số bán hàng online sales tăng 39% trong Q1 2021, gần gấp 3 lần 14% của Q1 2020, lớn hơn cả Q3 2020 và Q4 2020.

Ứng dụng mua sắm online đã trở thành một tiện ích tối cao cho các khách hàng bởi nó đáp ứng được tất cả các nhu cầu của họ và đồng thời đảm bảo an toàn. Các tính năng chính cần được tích hợp đó là chuyển đổi một cách trôi chảy giữa các loại mặt hàng, một trang giỏ hàng với chức năng huỷ mua, các cổng thanh toán như Paypal, UPI, Razorpay,..v..v… cửa sổ trò chuyện hỗ trợ khách hàng, các chức năng huỷ đơn, trả hàng,..v..v..
Không có khi nào nào tốt hơn lúc này đề thiết kế xây dựng một ứng dụng shopping. Đại dịch COVID-19 đã làm tăng vận tốc quy đổi sang shopping trực tuyến. Các điều tra và nghiên cứu chỉ ra rằng doanh thu bán hàng trực tuyến sales tăng 39 % trong Q1 2021, gần gấp 3 lần 14 % của Q1 2020, lớn hơn cả Q3 2020 và Q4 2020. Ứng dụng shopping trực tuyến đã trở thành một tiện ích tối cao cho những người mua bởi nó phân phối được toàn bộ những nhu yếu của họ và đồng thời bảo vệ bảo đảm an toàn. Các tính năng chính cần được tích hợp đó là quy đổi một cách trôi chảy giữa những loại loại sản phẩm, một trang giỏ hàng với công dụng huỷ mua, những cổng giao dịch thanh toán như Paypal, UPI, Razorpay, .. v .. v … hành lang cửa số trò chuyện tương hỗ người mua, những công dụng huỷ đơn, trả hàng, .. v .. v ..

5. Một số tài liệu học React Native

Sau đây là một số tài liệu tham khảo để hỗ trợ bạn trong quá trình học React Native:

1. Tài liệu chính thức của React Native

Nếu bạn hỏi một lập trình viên cách để học một cái gì đó thì câu trả lời thường sẽ là “hãy đọc tài liệu đi”. Mình cũng khuyến khích bạn nên làm vậy bởi cách tốt nhất để hiểu cách thức hoạt động của một thứ gì đó là học về các tính năng và logic của nó. Rất may mắn là tài liệu của React Native được viết một cách đơn giản và dễ hiểu và có các ngôn ngữ khác nhau cho bạn lựa chọn.

Bạn có thể truy cập link sau: https://reactnative.dev/docs/getting-started

2. Các khoá học online

Một lựa chọn hiển nhiên đó là bạn hoàn toàn có thể học code với những khoá học trực tuyến cấp tốc. Có rất nhiều khoá học tương quan React trên Udemy. Dưới đây mình đã chọn ra 1 số ít khoá học tiêu biểu vượt trội mà bạn hoàn toàn có thể tìm hiểu thêm :

The Complete React Native and Hooks Course.

Khoá học này giúp bạn hiểu về những kỹ năng và kiến thức cơ bản của React, những thuật ngữ, những concepts của Redux. Bạn cũng sẽ được học cách nhanh gọn thiết kế xây dựng bản mẫu tiến hành ứng dụng của bạn lên Apple và Google Play Stores .

Build Full-stack React Native Apps with Express.js Backend.

Đây là một trong nhữn g khoá học thực tiễn nhất bởi khi hoàn thành bạn sẽ có thể xây dựng được 4 ứng dụng sử dụng Redux, React Navigation, MongoDB, Node/Express. Khoá học này ở trình độ trung cấp nên không phù hợp lắm với người mới bắt đầu, tuy nhiên bạn sẽ học được nhiều điều thông qua thực hành nên hãy cứ thử xem sao!

React Native: Advanced Concepts. Khi bạn đã hoàn thành 2 khoá trên thì bạn có thể bắt đầu với các kiến thức nâng cao hơn. Trong khoá học này bạn sẽ học cách xây dựng ứng dụng React Native với Expo, tạo animation, sử dụng các chức năng nâng cao của framework, tận dụng tối đa khả năng của React Navigation, thêm logic vào backend Firebase của bạn với Google Cloud Functions, thu hút người dùng với Push Notifications và sử dụng Redux Persist.

3. Các cuốn sách

Một cuốn sách hay để hỗ trợ cho những khoá học trực tuyến đó là cuốn FullStack : React Native. Nó là một bản hướng dẫn hoàn thành xong về React Native gồm có tổng thể những kỹ năng và kiến thức từ những thành phần đến tiến hành ứng dụng. Chắc chắn là nó sẽ giúp bạn hiểu rõ hơn về những kỹ năng và kiến thức đã học trong những khoá trực tuyến. Một gợi ý nữa cho bạn đó là cuốn Pete Hunt’s tutorial about ReactJS – Thinking in React. Nó sẽ giúp bạn hiểu rõ hơn về logic React và chính sách của những thành phần .

Kết luận

Qua đây thì hẳn là các bạn cũng có được một cái nhìn tổng quan về React Native, về khái niệm, những kiến thức cơ bản-nâng cao và các ứng dụng của React Native. Đây không phải là một framework đơn giản nên cần phải có sự nỗ lực lớn từ chính bản thân bạn. Hãy tự tìm tòi, khám phá, tham gia các khoá học, tham khảo các cuốn sách hoặc các bài hướng dẫn trên Youtube và tự bắt tay vào xây dựng các ứng dụng của riêng bạn.

Chúc bạn may mắn trên con đường chinh phục React Native.

>Chờ chút: Nếu bạn đang tự học React Native và muốn đi làm nhanh về nghành nghề dịch vụ này thì hãy tham gia ngay

Khóa học

Front end với React Native

cùng chuyên viên doanh nghiệp. Đào tạo từ số 0 cho người mới mở màn. Hỗ trợ ra mắt thực tập / Việc làm sau khóa học .

—

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP.HN

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Website : https://laodongdongnai.vn

Fanpage: https://facebook.com/NIIT.ICT/

Xem thêm: Những lý do tại sao nên lựa chọn việc làm tại Nhật Bản (phần 1)

# niit # niithanoi # niiticthanoi # hoclaptrinh # khoahocreactnative # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # java # php # python # react

Source: https://laodongdongnai.vn
Category: Chia Sẻ Kiến Thức

sections	renderItem	initialNumToRender	keyExtractor
renderSectionHeader	renderSectionFooter	onRefresh	inverted
extraData	onEndReached	keyExtractor	legacyImplementation
onViewableItemsChanged	refreshing	removeClippedSubviews	ListHeaderComponent
SectionSeparatorComponent	stickySectionHeadersEnabled	onEndReachedThreshold	ListEmptyComponent

allowFontScaling	autoCapitalize	autoCorrect	autoFocus
blurOnSubmit	caretHidden	clearButtonMode	clearTextOnFocus
contextMenuHidden	dataDetectorTypes	defaultValue	disableFullscreenUI
editable	enablesReturnKeyAutomatically	inlineImageLeft	inlineImagePadding
keyboardAppearance	keyboardType	maxLength	multiline
numberOfLines	onBlur	onChange	onChangeText
onContentSizeChange	onEndEditing	onFocus	onKeyPress
onLayout	onScroll	onSelectionChange	onSubmitEditing
placeholder	placeholderTextColor	returnKeyLabel	returnKeyType
scrollEnabled	secureTextEntry	selection	selectionColor
selectionColor	selectionState	selectTextOnFocus	spellCheck
textContentType	style	textBreakStrategy	underlineColorAndroid

Props	Mô tả
animating	Lựa chọn để hiển thị hình tượng ( mặc định là true ) hoặc ẩn nó đi ( false ) .
size	Đặt kích cỡ của hình tượng ( ‘ small ‘, ‘ large ‘, số ). kích cỡ mặc định là small. Định dạng số chỉ tương hỗ trên Android .
color	Đặt màu phần nổi của con quay ( mặc định là màu xám ) .
hidesWhenStopped	Lựa chọn hiển thị hoặc ẩn hình tượng khi không có hoạt động giải trí ( mặc định là true ) .

Prop	Mô tả
onValueChange ( itemValue, itemPosition )	Là một callback prop và được gọi khi item được chọn. Nó cần 2 tham số ( itemValue : item ( giá trị ) được chọn, itemPosition : vị trí ( chỉ mục ) của item được chọn ) .
selectedValue	Trả về giá trị được chọn .
style	Là một kiểu picket style .
testID	Sử dụng để xác lập view trong kiểm thử đầu-cuối .
enabled	Là một Boolean prop để vô hiệu hóa picker khi được đặt về false. Nếu nó được đặt về false thì người dùng sẽ không hề lựa chọn được .
mode	Trên Android, nó xác lập cụ thể cách hiển thị những item lựa chọn khi người dùng click vào picker. Nó có những property là ” dialog ” và ” dropdown “. Dialog là chính sách mặc định và sẽ hiển thị là một hộp thoại thông tin. Dropdown hiển thị picker là một view neo thả .
prompt	Được sử dụng trên Android với chính sách hộp thoại như thể title của hộp thoại .
itemStyle	Tạo kiểu cho mỗi item của những nhãn picker .

Props	Description
animated	Thanh trạng thái sẽ có hoạt ảnh nếu property của nó đổi khác. Nó tương hỗ backgrondColor, hidden, và barStyle .
barStyle	Nó đặt màu của văn bản trên thanh trạng thái .
hidden	Dùng để ẩn và hiện thânh trạng thái. Mặc định sẽ là false. Nếu hidden = { false } thì nó sẽ được hiển thị, nếu hidden = { true }, thì nó sẽ ẩn thanh trạng thái .
backgroundColor	Đặt màu nền của thanh trạng thái .
translucent	Nếu được đặt về true, ứng dụng sẽ được kiến thiết xây dựng bên dưới thanh trạng thái .
showHideTransition	Hiển thị hiệu ứng quy đổi khi hiển thị và ẩn thanh trạng thái. Giá trị mặc định là ‘ fade ‘ .
networkActivityIndicatorVisible	Kiểm tra hình tượng mạng có hiển thị hay không. Hỗ trợ trong iOS .

Phương thức	Mô tả
`setOpacityTo ( )`	Tạo hoạt ảnh cho touchable đến một độ mờ mới .

setHidden	setBarStyle	setBackgroundColor
setNetworkActivityIndicatorVisible	setTranslucent

source	injectJavaScript	injectedJavaScript	onError
onLoad	onLoadEnd	onLoadStart	onMessage
originWhitelist	renderError	style	userAgent
html	url	geolocationEnabled	scrollEnabled
contentInset	bounces	allowFileAccess	nativeConfig

Methods	Description
Animated. timing ( )	Tạo hiệu ứng cho giá trị theo thời hạn sử dụng nhiều đường cong nới, hoặc sử dụng hàm của riêng nó .
Animated. sự kiện ( )	Nó trực tiếp sắp xếp sự kiện vào những giá trị được tạo hiệu ứng .
Animated. spring ( )	Tạo hiệu ứng cho giá trị. Nó theo dõi vận tốc của state để tạo ra những hoạt động mượt mà dưới dạng những update toValue .
Animated. decay ( )	Nó khởi động hiệu ứng với một vận tốc bắt đầu và chậm dần đến khi dừng lại .

Phương thức	Mô tả
getCurrentPosition ( )	Kích hoạt success callback một lần với thông tin mới nhất về vị trí .
watchPosition ( )	Kích hoạt success callback khi nào vị trí đổi khác. Nó trả về một watchId ( số ) .
clearWatch ( )	Xóa watchId của watchPosition ( ) .
stopObserving ( )	Ngừng quan sát biến hóa vị trí của thiết bị cũng như vô hiệu toàn bộ những listener đã được ĐK trước đó .
setRNConfiguration ( )	Đặt những lựa chọn tùy chỉnh, được sử dụng trong tổng thể những nhu yếu vị trí .
requestAuthorization ( )	Nó nhu yếu những quyền vị trí thích hợp dựa trên khóa được tùy chỉnh trên pList .

Hướng dẫn cài đặt và tự học lập trình React Native từ cơ bản đến nâng cao

1. React Native là gì ?

1.1. Khái niệm

1.2. Tại sao React Native lại trở nên phổ biến ?

1.3. React Native hoạt động như thế nào ?

1.4. Tại sao lại sử dụng React Native làm Framework phát triển ứng dụng?

Giao diện người dùng tương tác

Framework phát triển ứng dụng hiệu quả về chi phí

Độ tin cậy cao

Cải thiện hiệu năng

2. Hướng dẫn cài đặt và thiết lập môi trường làm việc của React Native trên Windows

2.1. Cài đặt Chocolatey

2.2. Cài đặt Node.js, Python2 và JDK8

2.3. Cài đặt Android Studio

2.4. Thiết lập Android SDK

2.5. Cài đặt React Native CLI

2.6. Tạo một ứng dụng mới

2.7. Chạy ứng dụng

2.7.1. Thiết lập thiết bị Android

3.Hướng dẫn học React Native từ cơ bản đến nâng cao

Phần 1: Ứng dụng đầu tiên “Hello World”

Phần 2: View, State và Prop

1. React Native View

2. React Na ​ tive State

3. React Native Props

Phần 3 : React Native Style

Phần 4 : Chiều cao và chiều rộng

Phần 5 : Các nút React Native ( Buttons )

Phần 6 : Layout và Flexbox

Phần 8 : React Native ScrollView

Phần 9: React Native List

1. React Native FlatList

2. React Native SectionList

Phần 10 : React Native Touchables

Phần 11 : React Native Text Input

Phần 12 : React Native ActivityIndicator

Phần 13 : React Native Picker

Phần 14 : React Native StatusBar

Phần 15 : React Native Switch

Phần 16 : React Native WebView

Hello javaTpoint

Hello javaTpoint

Phần 17 : React Native ProgressBar

1. React Native ProgressBarAndroid

2. React Native ProgressBar Với Animated

Phần 1 : React Native Animation và Image

1. React Native Animation

2. React Native Image

Phần 2 : React Native APIs

1. React Native Alert

2. React Native Geolocation

3. Liên kết và sử dụng những thư viện bên thứ ba

Phần 3 : Điều hướng

1. React Native Navigation

2. Tùy chỉnh thanh tiêu đề

3. Di chuyển giữa những trang

4. Truyền giá trị giữa những trang

ProfileScreen. js

5. Điều hướng Tab

5. Thêm hình tượng vào bên dưới điều hướng Tab

6. Tạo Material Bottom Tab Navigator

7. React Native Top Tab Navigator ( createMaterialTopTabNavigator )

8. Điều hướng Ngăn kéo ( createDrawerNavigator )

Phần 4 : Storage

1. React Native AsyncStorage

2. Các phương pháp AsyncStorage

4.Các ứng dụng với React Native

Ứng dụng trò chuyện

Ứng dụng đọc sách

Ứng dụng tin tức với âm thanh

Ứng dụng chơi nhạc

Ứng dụng shopping

5. Một số tài liệu học React Native

1. Tài liệu chính thức của React Native

2. Các khoá học online

The Complete React Native and Hooks Course.

Build Full-stack React Native Apps with Express.js Backend.

3. Các cuốn sách

2. React Na tive State