Báo cáo tìm hiểu về hiển thị và lưu trữ dữ liệu

BÁO CÁO TÌM HIỂU VỀ HIỂN THỊ VÀ LƯU TRỮ DỮ LIỆU Chương 1: TỔNG QUAN LÝ THUYẾT Các component hiển thị danh sách: 1.1 ScrollView • Là component cuộn dùng để chứa nhiều component view khác • Tất thành phần ScrollView render lúc dù chúng không hiển thị hình => Dùng để hiển thị số component 1.2.ListView • Là component thiết kế cho việc thị danh sách theo chiều dọc • ListView sử dụng prop ListView DataSource chứa mảng liệu sử dụng prop renderRow để trả component dùng để render • NGƯNG PHÁT TRIỂN từ react-native 0.60 1.3 FlatList • FlatList component dùng để thị danh sách • So với ListView, FlatList cải thiện việc sử dụng nhớ độ hiệu Đồng thời đơn giản hóa props (loại bỏ DataSource) • FlatList render component hiển thị hình, khơng phải tất lúc ScrollView • FlatList hoạt động tốt với danh sách có kích thước lớn số lượng phần tử thay đổi theo thời gian • Hỗ trợ tính năng: • Đa tảng • Có hỗ trợ cuộn ngang • Có Header Footer • Có ngăn cách cách item list • Pull to Refresh • FlatList component yêu cầu props để hiển thị phần tử: • data : Khác với ListView sử dụng DataSource, FlatList sử dụng data tập item cần hiển thị • renderItem: lấy item từ data trả component để hiển thị Hiển thị lưu trữ liệu 2.1 INTERNAL storage  Các thư viện hỗ trợ lưu trữ liệu vào Local Storage: • AsyncStorage • MMKV: kho lưu trữ liệu dạng key/value Nhanh AsyncStorage 30 lần • SQLite • Redux Persist: thư viện cho phép lưu trữ redux store vào local storage • Realm: • AsyncStorage hệ thống lưu trữ key – value khơng mã hóa, khơng đồng bộ, liệu lưu trữ sử dụng global ứng dụng • Trên iOS, giá trị nhỏ lưu từ điển giá trị lơn lưu file riêng biệt • Trên Android, AsyncStorage sử dụng RockDB SQLite có sẵn  Cách hoạt động AsyncStorage: • AsyncStorage lưu trữ liệu thiết bị user (iOS Android) • Trong trường hợp user đóng ứng dụng khởi động lại thiết bị, liệu tồn • Dữ liệu bị xóa user xóa cache ứng dụng  CÁC PHƯƠNG THỨC: • setItem: set giá trị kiểu chuỗi cho key, dùng để lưu chỉnh sửa liệu • getItem: lấy giá trị kiểu chuỗi từ key cho trước • removeItem: xóa giá trị key • multiGet: trả cặp key – value từ mảng key cho trước • multiRemove: xóa cặp key – value Lưu liệu Load liệu 2.2 External storage  Để app react native lấy data từ URL , react native người ta sử dụng Fetch Api  Fetch tương tự bạn sử dụng XMLHttpRequest số framework hỗ trợ khác tương tự  Tạo HTTP Request Khi muốn lấy nội dung cách gọi đơn giản từ URL cẩn đặt URL fetch: • Customize the HTTP request • Xử lý response • Ví dụ Demo: 3.1 Internal storage - Ứng dụng Note Taking: a) Prop state: State bao gồm: isEdit: vị trí item cần edit List: danh sách note isLoading editText: text note chỉnh sửa b) componentDidMount: Thay đổi trạng thái thành isLoading Sử dụng hàm AsyncStorage.getItem(‘list’) để lấy liệu từ storage Nếu có liệu: gán giá trị vừa lấy cho state.list Cuối cùng, thay đổi trạng thái isLoading = false c) saveToStorage: Phương thức dành dùng để lưu liệu vào storage Vì AsyncStorage lưu giá trị kiểu chuỗi, nên ta phải stringify liệu Sau sử dụng AsyncStorage.setItem(‘list’,data) để lưu vào nhớ d) add: Để thêm note vào danh sách, trước tiên thêm giá trị rỗng vào cuối danh sách Sau cập nhật lại list, lưu danh sách vào storage set note edit note cuối e) setEdit(index): Nếu isEdit (vị trí note edit) khác với tham số index: chuyển sang edit note vị trí index f) setList: Đây phương thức sử dụng hoàn tất chỉnh sửa note Cập nhật lại text note vị trí index lưu danh sách g) deleteItem: Xóa phần tử vị trí index list lưu vào storage h) render: i) j) k) l) m) n) o)  render() {     return (                           Note App                  {this.state.isLoading ? ( //Nế u chưa load xong hiể n thị ActivityIndicator p)            q)         ) : (            r)             {this.state.list.map((item, key) => (//Sửdụng map lặp lầ n lượt item list sửdụng key vị trí item s)               // Có component Fragment t)                 {this.state.isEdit === null || this.state.isEdit ! == key ? (//Component hiể n thị user không edit note note edit có key khác với this.state.isEdit u)                    this.setEdit(key)}> //Nhấ n giữ gọi hàm setEdit cho phép user edit note y)                     {item} z)                      this.deleteItem(key)}> cc)                       Delete dd)                      ee)                    ff)                 ) : null} gg)                 {this.state.isEdit !== null ? ( hh)                   key == this.state.isEdit ? ( //Component hiể n thị user nhấ n giữ note ii)                      thi s.setList(this.state.editText, key)} ll)                       onSubmitEditing={() => mm)                         this.setList(this.state.editText, key) //Khi edit xong, note lưu lại nn)                       } oo)                       value={this.state.editText} pp)                       autoFocus qq)                       onChangeText={editText => thi s.setState({editText})}//Khi text thay đổ i thay đổ i state.editText rr)                     /> ss)                   ) : null tt)                 ) : null} uu)                vv)             ))} ww)              this.add()}> //Button thêm note xx)               Add yy) zz) aaa) bbb)                                 )}        3.2 External storage from MySQL Bước 1: Chuẩn bị Data + Ta có bảng product với trường liệu hình - Tạo file php để chuyển liệu từ bảng product product_type thành json + Kết thu url với liệu hình -Bước 2: Fetch data + Fetch data từ url, sử dụng useState để lưu trữ data useEffect để thực xử lí lấy data từ url + Đẩy data có vào flatlist, ta cần gọi item.[tên trường] để lấy giá trị trường đó, trường hợp có nhiều bảng viết chung url ta cần gọi data [tên bảng] để chọn đến bảng mong muốn *Kết ... props để hiển thị phần tử: • data : Khác với ListView sử dụng DataSource, FlatList sử dụng data tập item cần hiển thị • renderItem: lấy item từ data trả component để hiển thị Hiển thị lưu trữ liệu. .. hỗ trợ lưu trữ liệu vào Local Storage: • AsyncStorage • MMKV: kho lưu trữ liệu dạng key/value Nhanh AsyncStorage 30 lần • SQLite • Redux Persist: thư viện cho phép lưu trữ redux store vào local... Realm: • AsyncStorage hệ thống lưu trữ key – value khơng mã hóa, khơng đồng bộ, liệu lưu trữ sử dụng global ứng dụng • Trên iOS, giá trị nhỏ lưu từ điển giá trị lơn lưu file riêng biệt • Trên Android,