Làm ứng dụng học toán đơn giản với React Native – Phần 2

Tram Ho

Ban đầu khi ra mắt bài viết đầu về làm ứng dụng học toán đơn giản, mình cũng không nghỉ mình sẽ viết tiếp phần 2 !^.^ . Nhưng bản thân nhận thấy app có khá nhiều hướng để phát triển nên cứ tiện tay code thêm, nên giờ cũng tiện tay viết tiếp phần 2 cho nó :v. Nên từ giờ, mình sẽ khởi động seri này, biến 1 cái app tưởng chừng không có gì, nhưng thật ra là rỗng tuếch (đùa thôi nhé :v), qua thời gian, mình sẽ áp dụng dần dà các kỹ thuật trong React Native mà mình được tiếp xúc như Notifications, Authentication, Biometric, vân vân và mây mây …

Mình nghĩ giới thiệu chắc như vậy cũng đủ rồi nhỉ :3, giờ bắt đầu thôi nào

1) Cài đặt

Trong bài viết này, có 2 điều mình sẽ thêm vào app, cũng như giúp các bạn tiếp tục làm quen với những thứ cơ bản nhất trong React Native, đó là @react-navigation/nativemobx, trong đó @react-navigation/native dùng để chuyển qua lại giữa các màn hình, còn mobx dùng để quản lý state (đối với những bạn mới thì mobx là lựa chọn không tệ để bắt đầu học về cách quản lý state)

Docs của 2 em nó mobx : https://mobx.js.org/README.html#getting-started, https://reactnavigation.org/docs/getting-started

2)react-navigation/native

Chúng ta sẽ chỉnh lại 1 số file và tạo thêm 1 số file mới, đầu tiên là App.js,

ở đây mình có tạo ra 1 Stack Welcome, mục đích là để chứa 3 màn hình con khác, bao gồm welcome, practice và failed

WelcomeStack.js đây :v

Vì để cho tiện việc phát triển sau này, nên tên của các màn hình, hay Stack, mình đều thông báo vào 1 file chung là route.js như trên,
các bạn cũng nên có 1 bố cục sắp xếp folder và file hợp lý để sau này lỡ dự án có phình to ra thì cũng không cần phải sắp xếp lại. Các bạn có thể tham khảo qua file route.js của mình:

Tiếp theo là 3 file lần lượt là welcome.js, practice.js, failed.js

À ngoài ra trong lần update này, mình còn áp dụng React native animation cơ bản nữa, nhưng vì đó 1 chủ đề khá là thú vị và hay ho, xứng đáng có 1 bài viết riêng, mình sẽ không viết nó ở đây

Trong file này, nếu bạn chú ý đọc 1 tí ( nếu không đọc cũng không sao, chỉ là sẽ lỗi tí khi chạy thôi mà) sẽ thấy mobxPracticeStore đã được thêm vào, mình sẽ nói về nó ở phần tiếp theo.

Lưu ý: Nếu trong lúc copy paste, bạn có phát hiện cái library nào lạ lạ thì cái giúp mình với nhé :3

Trong 3 file trên, ngoại trừ phần animationmobx thì chỉ là update UI cho app thêm đep và tạo cảm giác gần gũi hơn với người dùng thôi. Nên mình sẽ không giải thích nhiều về 3 file này

3) mobx

mobx nếu bạn đã từng làm qua redux thì mục đích của nó cũng là để quản lý state trong store 1 cách hiệu quả. Cùng lướt qua file PracticeStore.js tí nhé

Nếu đọc kỹ, các bạn sẽ thấy các biến được decorate với từ khóa là observable, như vậy nghĩa là sao ? Có thể nói observable giống với state trong React, khi biến được decorate bởi observable thay đổi giá trị, nó sẽ khiến Component có sử dụng chúng được re-render, với điều kiện Component đó phải được bọc bởi observer như thế này export default observer(Component). Với những function để lấy dữ liệu, sẽ được decorate là computed, và các function tác động và xử lý đến các biến observable sẽ được decorate là action. Nghe thật đơn giản phải không nào? Nếu bạn đã dùng qua Redux thì bạn sẽ thấy mobx gọn nhẹ như thế nào, hoặc nếu chưa đọc thì đọc qua bài so sánh của mình đã viết trước đây nhé, link đây

Bạn có thể đọc thêm thông tin về mobx trong trang chủ của nó.

4) Kết thúc

Vậy là chúng ta đã update xong cho ứng dụng học toán rồi, giờ hãy xem thử hình dạng của nó nào.

Khi mới vào này

Bấm vào nút play

Thắng được 2 câu và lên được 2 điểm)

Tới câu thứ 3 thì oẳng mất tiêu

Bài viết của mình đến đây đã hết rồi, hy vọng sẽ được gặp các bạn trong phần 3, cảm ơn mọi người đã dành thời gian để đọc bài viết của mình

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo