Tóm Tắt
Chào các bạn, có lẽ cách để học 1 cái gì đó mới 1 cách nhanh nhất, không gì bằng việc bắt tay vào làm nó ngay lập tức. Đối với react native cũng vậy, sau 1, 2 ngày dành ra để đọc docs của nó, mình đã tạo ra 1 app đơn giản để giúp cho các bé cấp 1 có thể học môn toán 1 cách đỡ nhàm chán hơn. Ứng dụng dù còn khá sơ sài nhưng thông qua nó để tiếp cận React native cũng không quá tệ. Nên hôm nay mình sẽ viết 1 bài hướng dẫn để giúp các bạn tạo ra app đầu tiên của mình
1) Cài đặt
Trước tiên để bắt đầu làm với React native, bạn phải cài đặt đã, hãy làm theo hướng dẫn của link sau là ok: , với thiết bị test, mình chọn simulator nên phải cài thêm Android Studio ( hoặc bạn có thể dùng Genymotion -> không khuyến khích), nếu bạn chọn máy thật thì test sẽ trực quan hơn nhiều ( khuyến khích cách này)
Câu lệnh cài đặt npx react-native init <Tên app của bạn>, đơn giản phải không. Giờ thì bắt đầu được rồi, đến đây thì bắt đầu được rồi
2) Tạo giao diện
App của mình sẽ chỉ có 1 màn hình duy nhất thôi, nên giao diện cũng sẽ vô cùng đơn giản
Như các bạn quan sát, mình chia bố cục làm 3 phần là Header, Body và Footer, vì vậy code của mình sẽ được sắp xếp như này
return (
<View >Với mỗi Component, mình sẽ code riêng ,để sau này nếu muốn phát triển thêm cũng dễ chịu hơn
const Header = () => {
return (
<View >Nếu các bạn đã đọc tới đây ( và đã từng làm React), thì có nhận ra và nói: "Ồ, nó cũng giống Reactjs nhở, có khác lắm đâu". Đúng rồi, nó không khác lắm so với React về cú pháp và cách sử dụng Component. Tuy nhiên nó vẫn có những đặc trưng của nó.
Ví dụ: Thẻ View trong RN sẽ được xem như thẻ div trong React, thẻ Text là thẻ p ( nói chung là nó chứa chữ đấy), Thẻ TouchableHighlight giống như thẻ div kết hợp với button ( nghĩa là bấm được và >
Trong RN không có className hay class, mà thay vào đó ta có >
const windowWidth = Dimensions.get('window').width;
const >Những thành phần như >, View hay Text ta sẽ import trực tiếp từ RN
import {
>Thật đơn giản để làm giao diện đúng không.
3) Function
Trong app này, mình sẽ sử dụng tới React Hook cho tiện lợi, mình sẽ khai báo điểm, thuật toán để random ra phép tính và kết quả
const [statusQuiz, setStatusQuiz] = useState({
isStart: false,
content: 'BẮT ĐẦU',
});
const [point, setPoint] = useState(0);
const [a, setA] = useState(randomNumber(0, 10));
const [b, setB] = useState(randomNumber(0, 10));
const [result, setResult] = useState(calculateResult());
function calculateResult() {
const isTrue = Math.floor(Math.random() * 2);
if (isTrue === 0) {
return a + b;
}
const isBigger = Math.floor(Math.random() * 2);
let resultFalse = 0;
if (isBigger === 0) {
resultFalse = a + b + Math.floor(Math.random() * 5);
} else {
resultFalse = a + b - Math.floor(Math.random() * 5);
}
return resultFalse < 0 ? 0 : resultFalse;
}
function randomNumber(to, from) {
return Math.floor(Math.random() * from) + to;
}
useEffect(() => {
setA(randomNumber(1, 9));
setB(randomNumber(1, 9));
setResult(calculateResult());
}, [point]);
function pressAnswer(type) {
const isTrue = a + b === result;
if ((type === 'wrong' && isTrue) || (type === 'right' && !isTrue)) {
setPoint(0);
setStatusQuiz({
isStart: false,
content: 'SAI RỒI! BẠN CÓ MUỐN LÀM LẠI KHÔNG?',
});
return;
}
if ((type === 'wrong' && !isTrue) || (type === 'right' && isTrue)) {
return setPoint(point + 1);
}
}
function pressStart() {
setStatusQuiz({
isStart: true,
content: '',
});
}
Thuật toán và ý tưởng khá là dễ hiểu và đơn giản phải không 
. Chỉ cần lắp ráp lại là ta có 1 app hoàn chỉnh để vọc rồi.
4) Demo Lúc vào app nó sẽ thế này
Bấm vào "Bắt Đầu" để bắt đầu
Trả lời đúng thì điểm số sẽ lên
Sai 1 câu, điểm sẽ về 0 và hiện lên thông báo
App chỉ có vậy thôi , nhưng cũng đủ để cháu mình học toán cả 1 buổi chiều rồi (yaoming)
Cảm ơn các bạn đã theo dõi bài viết của mình. Nếu có gì sai sót và các bạn muốn góp ý bổ sung, hãy để lại bình luận ở dưới để mình biết nhé, xin cảm ơn các bạn :3
Bài viết trên do 1 bạn chia sẻ trên internet, chúng tôi tổng hợp và trích soạn. Cảm ơn bạn đã có những bài viết hay cho cộng cồng.
