Displaying and saving data

DISPLAYING AND SAVING DATATRONG CHƯƠNG NÀY, SẼ ĐỀ CẬP ĐẾN CÁC NỘI DUNG SAU : • SỬ DỤNG LISTVIEW ĐỂ HIỂN THỊ CÁC HÀNG DỮ LIỆU • QUẢN LÝ TRẠNG THÁI • SỬ DỤNG CÁC ĐẠO CỤ ĐỂ CHUYỂN DỮ LIỆU V

CHÀO THẦY VÀ CÁC BẠN

ĐẾN VỚI BÀI THUYẾT TRÌNH CỦA NHÓM 11

DISPLAYING AND SAVING DATA

TRONG CHƯƠNG NÀY, SẼ ĐỀ CẬP ĐẾN CÁC NỘI DUNG SAU :

• SỬ DỤNG LISTVIEW ĐỂ HIỂN THỊ CÁC HÀNG DỮ LIỆU

• QUẢN LÝ TRẠNG THÁI

• SỬ DỤNG CÁC ĐẠO CỤ ĐỂ CHUYỂN DỮ LIỆU VÀ GỌI LẠI VÀO CÁC THÀNH PHẦN

• SỬ DỤNG ASYNCSTORAGE ĐỂ LƯU TRỮ DỮ LIỆU TRÊN CẢ THIẾT BỊ IOS VÀ ANDROID

SỬ DỤNG LISTVIEW ĐỂ HIỂN THỊ CÁC HÀNG DỮ LIỆU

Thành phần ListView khá đơn giản để sử dụng Bạn phải cung cấp hai phần thông tin, dataSource sẽ cung cấp dữ liệu cho tất cả các hàng và hàm

renderRow, chỉ đơn giản là một hàm lấy dữ liệu của mỗi hàng (một ghi chú duy nhất) và trả về một thành phần React

import React,

{

StyleSheet,

Text,

View,

ListView

}

From

'react-native';

export default class NoteList extends

React.Component

{

constructor (props)

{

super(props);

this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

} render() { return (

{ return (

{ rowData.title }

) } }/>

) } }

UNDERSTANDING PROPS (HIỂU VỀ ĐẠO CỤ)

• PROPS LÀ CƠ CHẾ CHÚNG TÔI SỬ DỤNG ĐỂ TRUYỀN DỮ LIỆU ĐẾN CÁC

THÀNH PHẦN REACT

• MUỐN CHUYỂN MỘT THAM CHIẾU ĐIỀU HƯỚNG TỪ THÀNH PHẦN

HOMESCREEN ĐẾN NOTELIST

EXPORT DEFAULT CLASS HOMESCREEN EXTENDS REACT.COMPONENT { RENDER () {

RETURN (

<VIEW STYLE={STYLES.CONTAINER }>

<NOTELIST NAVIGATOR={THIS.PROPS.NAVIGATOR}/>

</VIEW>

);

}

}

USING STATE (SỬ DỤNG TRẠNG THÁI)

• CÁC THÀNH PHẦN REACT CÓ MỘT BIẾN TÍCH HỢP ĐƯỢC GỌI LÀ TRẠNG THÁI MÀ BẠN CÓ THỂ SỬ DỤNG ĐỂ THEO DÕI TRẠNG THÁI CỦA THÀNH PHẦN

• TRONG VÍ DỤ TRƯỚC, CHÚNG TA BIẾT RẰNG CHÚNG TA ĐANG CHUYỂN MỘT GHI CHÚ MÀ CHÚNG TA MUỐN HIỂN THỊ, VÌ VẬY TRẠNG THÁI BAN ĐẦU CỦA THÀNH

PHẦN ĐƯỢC BIỂU THỊ BẰNG GHI CHÚ ĐÓ

constructor (props) {

super(props)

this.state = {note:this.props.note};

}

Vì vậy, this.state là một đối tượng có thuộc tính tiêu đề và nội dung ban đầu được đặt thành tiêu đề và nội dung của ghi chú mà chúng tôi đã chuyển

PASSING CALLBACKS IN

PROPS(CHUYỂN LỆNH GỌI LẠI TRONG ĐẠO CỤ)

MỘT MẪU PHỔ BIẾN TRONG REACT LÀ CHUYỂN MỘT LỆNH GỌI LẠI ĐẾN MỘT

THÀNH PHẦN THÔNG QUA CÁC ĐẠO CỤ TRONG TRƯỜNG HỢP CỦA CHÚNG TÔI,

CHÚNG TÔI MUỐN CHUYỂN MỘT LỆNH GỌI LẠI TỚI NOTESCREEN CỦA CHÚNG TÔI

ĐỂ NÓ CÓ THỂ CHO CHÚNG TÔI BIẾT KHI NÀO GHI CHÚ ĐƯỢC THAY ĐỔI HÃY QUAY LẠI THÀNH PHẦN REACTNOTES TRONG TỆP INDEX.IOS.JS HOẶC INDEX.ANDROID.JS CỦA CHÚNG TÔI VÀ CẬP NHẬT HÀM RENDERSCENE CỦA CHÚNG TÔI, NHƯ ĐƯỢC HIỂN THỊ

RENDERSCENE (ROUTE, NAVIGATOR) {

SWITCH (ROUTE.NAME) {

CASE 'HOME':

RETURN (

<HOMESCREEN NAVIGATOR={NAVIGATOR} />

);

CASE 'CREATENOTE':

RETURN (

<NOTESCREEN

NOTE={ROUTE.NOTE}

ONCHANGENOTE={(NOTE) => CONSOLE.LOG("NOTE CHANGED", NOTE)}/> ); } }

CREATING NEW NOTES(TẠO GHI

CHÚ MỚI)

CHO ĐẾN NAY, CHÚNG TÔI ĐÃ CẬP NHẬT CÁC GHI CHÚ HIỆN CÓ LÀM THẾ NÀO ĐỂ CHÚNG TÔI THÊM NHỮNG CÁI MỚI?

USING ASYNCSTORAGE

• REACT NATIVE CUNG CẤP MỘT SỰ TRỪU TƯỢNG VỀ CƠ CHẾ LƯU TRỮ CỤC BỘ GỐC ĐỂ BẠN KHÔNG PHẢI LO LẮNG VỀ SỰ KHÁC BIỆT CƠ BẢN GIỮA CÁCH IOS

VÀ ANDROID LƯU DỮ LIỆU VÀO THIẾT BỊ

• NÓ THỰC SỰ ĐƠN GIẢN ĐỂ SỬ DỤNG, VÌ VẬY HÃY CẬP NHẬT THÀNH PHẦN

REACTNOTES CỦA CHÚNG TÔI ĐỂ SỬ DỤNG ASYNCSTORAGE

DELETING NOTES

ĐIỀU CUỐI CÙNG ĐỂ CÓ MỘT ỨNG DỤNG GHI CHÚ ĐẦY ĐỦ CHỨC NĂNG LÀ THÊM NÚT DELETE VÀO NOTESCREEN CỦA CHÚNG TA

ĐIỀU ĐẦU TIÊN CẦN LƯU Ý LÀ TÔI ĐÃ THÊM MỘT ĐIỀU KIỆN ĐỂ KIỂM TRA XEM GHI CHÚ ĐÃ

ĐƯỢC LƯU HAY CHƯA (CHÚNG TÔI SẼ CẦN ĐIỀU CHỈNH CHỨC NĂNG UPDATENOTE CỦA MÌNH ĐỂ THIẾT LẬP ĐIỀU NÀY) ĐIỀU NÀY LÀ ĐỂ ĐẢM BẢO RẰNG NÚT XÓA KHÔNG HIỂN THỊ CHO CÁC GHI CHÚ MỚI TRÌNH XỬ LÝ CREATE NOTE ONPRESS ĐÃ ĐƯỢC CẬP NHẬT ĐỂ ĐẶT ISSAVED = FALSE TRONG GHI CHÚ TRỐNG MÀ CHÚNG TÔI CHUYỂN ĐẾN NOTESCREEN, KHI NÚT ĐÓ ĐƯỢC NHẤN.

DELETING NOTES

KẾT THÚC VÀ THÀNH QUẢ ĐẠT ĐƯỢC

BẠN ĐÃ HỌC CÁCH SỬ DỤNG LISTVIEW ĐỂ HIỂN THỊ DỮ LIỆU, TRUYỀN DỮ LIỆU

VÀO CÁC THÀNH PHẦN BẰNG CÁCH SỬ DỤNG ĐẠO CỤ, THEO DÕI TRẠNG THÁI CỦA THÀNH PHẦN VÀ LƯU DỮ LIỆU VÀO THIẾT BỊ BẰNG ASYNCSTORAGE

CÁM ƠN THẦY VÀ CÁC BẠN ĐÃ LẮNG NGHE !!!