Ứng dụng viết bằng ReactNative sử dụng thư viện react-native-navigation để điều hướng các màn hình. Thư viện này có tích hợp sẵn animation giúp chuyển đổi màn hình có hiệu ứng đẹp. Để thực hành demo, ứng dụng mới tạo cần có navigation https://reactnavigation.org/ và có 2 component screen. Các bước thực hiện: Bước […]
//1. Tạo navigation tạo ra 2 màn hình: Login và Home, khi vào app thì hiển thị login, đúng thông tin thì tự chuyển sang home //======== File App.js ==================================== import * as React from ‘react’; import { NavigationContainer } from ‘@react-navigation/native’; import { createNativeStackNavigator } from ‘@react-navigation/native-stack’; import LoginComp from ‘./comp/LoginComp’; import HomeComp from […]
Trong ví dụ này sẽ sử dụng dữ liệu ở trong một biến mảng cục bộ, khi có tương tác API thì có thể thay thế mảng bằng dữ liệu lấy từ API về là hiển thị được. Các component được import vào ứng dụng: import React from ‘react’; import { SafeAreaView, View, FlatList, StyleSheet, […]
Trong ví dụ này sẽ sử dụng một state để lưu trữ một chỗi và thực hiện tương tác với chuỗi. Bạn tạo nội dung mới cho file App.tsx để thực hành, trước khi tạo nên backup nội dung đã có. Nếu bạn tạo project mới thì bạn xóa nội dung trong file App.tsx đi […]
Nối tiếp bài viết https://zezo.dev/view/cai-tien-ung-dung-todo-lam-chuc-nang-sua-voi-redux Tạo hàm trong reducer , toggleTodoStatus(state, action) { // tìm các todo, nếu cái nào phù hợp thì cập nhật trạng thái const todo = state.listTodo.find(row => row.id === action.payload); if (todo) { todo.status = !todo.status; } }, Sang TodoScreen thêm hàm xử lý action const handleToggleTodo = id => { […]
Nối tiếp bài viết về chức năng xóa https://zezo.dev/view/cai-tien-ung-dung-todo-lam-chuc-nang-xoa-voi-redux Tác động đến reducer để tạo hàm sửa, cải tiến phần giao diện Vào file todoReducer thêm hàm updateTodo updateTodo (state, action){ // lấy tham số truyền vào const {id, title} = action.payload; // tìm bản ghi phù hợp với tham số truyền vào const todo = […]
Tiếp theo bài này, ít nhất bạn cần thực hiện thành công ví dụ mẫu ở phần 1: https://zezo.dev/view/tao-ung-dung-todo-voi-redux-co-tuong-tac-api-trong-reactnative-p1 Trong phần này sẽ thực hiện xây dựng chức năng Đổi trạng thái Bước 1: Chỉnh sửa Reducer thêm thao tác xử lý Đổi trạng thái Bên trong hàm builder của extraReducers, bạn thêm đoạn code xử lý […]
Tiếp theo bài này, ít nhất bạn cần thực hiện thành công ví dụ mẫu ở phần 1: https://zezo.dev/view/tao-ung-dung-todo-voi-redux-co-tuong-tac-api-trong-reactnative-p1 Trong phần này sẽ thực hiện xây dựng chức năng Sửa Bước 1: Chỉnh sửa Reducer thêm thao tác xử lý SỬA Bên trong hàm builder của extraReducers, bạn thêm đoạn code xử lý kết Thêm updateTodoApi.fulfilled builder.addCase(updateTodoApi.fulfilled, […]
Tiếp theo bài này, ít nhất bạn cần thực hiện thành công ví dụ mẫu ở phần 1: https://zezo.dev/view/tao-ung-dung-todo-voi-redux-co-tuong-tac-api-trong-reactnative-p1 Trong phần này sẽ thực hiện xây dựng chức năng Thêm mới Bước 1: Chỉnh sửa Reducer thêm thao tác xử lý THÊM Bên trong hàm builder của extraReducers, bạn thêm đoạn code xử lý kết Thêm addTodoAPI.fulfilled […]
Tiếp theo bài này, bạn cần thực hiện thành công ví dụ mẫu ở phần 1: https://zezo.dev/view/tao-ung-dung-todo-voi-redux-co-tuong-tac-api-trong-reactnative-p1 Ở phần 1 đã hiển thị được danh sách rồi, sang phần này sẽ làm chức năng xóa. Bước 1: Chỉnh sửa Reducer thêm thao tác xử lý xóa Bên trong hàm builder của extraReducers, bạn thêm đoạn code […]