Displaying and saving data

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 đơn giản để sử dụng Bạn phải cung cấp hai phần thông tin, dataSource cung cấp liệu cho tất hàng hàm renderRow, đơn giản hàm lấy liệu hàng (một ghi nhất) trả 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 ( ); } } 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 đối tượng có thuộc tính tiêu đề nội dung ban đầu đặt thành tiêu đề nội dung ghi mà 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 ( ); CASE 'CREATENOTE': RETURN ( 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 DELETING NOTES Đ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 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 !!! .. .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... 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 đơn giản để sử dụng Bạn... (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