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

Tóm Tắt

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/native và mobx, 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 : ,

2. 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,

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import WelcomeStack from './src/navigation/welcomeStack';

export default function App() {
  return (
    <NavigationContainer>
      <WelcomeStack />
    </NavigationContainer>
  );
}

ở đâ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

import React from 'react';
import Practice from '../screen/practice';
import Failed from '../screen/failed';
import WelcomeScreen from '../screen/welcome';
import { StackRoute } from '../constants/route';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const WelcomeStack = () => {
  return (
    <Stack.Navigator initialRouteName={StackRoute.Main.Welcome}>
      <Stack.Screen
        name={StackRoute.Main.Welcome}
        component={WelcomeScreen}
        options={{ headerShown: false }}
        backBehavior="none"
      />
      <Stack.Screen
        name={StackRoute.Main.Practice}
        component={Practice}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name={StackRoute.Main.Failed}
        component={Failed}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

export default WelcomeStack;

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:

export const StackRoute = {
  Main: {
    Welcome: 'Welcome',
    Practice: 'Practice',
    Failed: 'Failed',
  },
};

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

// welcome.js
import React, { useRef, useEffect } from 'react';
import {
  >

À 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

// practice.js
import { observer } from 'mobx-react';
import 'mobx-react-lite/batchingForReactNative';
import React, { useState, useEffect } from 'react';
import {
  >

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 mobx và PracticeStore đã được thêm vào, mình sẽ nói về nó ở phần tiếp theo.

// failed.js
import React, { useRef, useEffect } from 'react';
import {
  >

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 animation và mobx 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é

import { observable, action, computed, decorate } from 'mobx';

class PracticeStore {
  firstParameter = 0;
  secondParameter = 0;
  isCorrect = true;
  point = 0;

  setFirstParameter(item) {
    this.firstParameter = item;
  }
  setSecondParameter(item) {
    this.secondParameter = item;
  }

  setPoint(item) {
    this.point = item;
  }

  get FirstParameter() {
    return this.firstParameter;
  }
  get SecondParameter() {
    return this.secondParameter;
  }

  get IsCorrect() {
    return this.isCorrect;
  }

  get Point() {
    return this.point;
  }

  randomNumber = (to, from) => {
    return Math.floor(Math.random() * from) + to;
  };

  calculateResult = () => {
    const isTrue = Math.floor(Math.random() * 4);
    if (isTrue === 0) {
      return this.firstParameter + this.secondParameter;
    }
    const isBigger = Math.floor(Math.random() * 4);
    let resultFalse = 0;
    if (isBigger === 0) {
      resultFalse =
        this.firstParameter +
        this.secondParameter +
        Math.floor(Math.random() * 2);
    } else {
      resultFalse =
        this.firstParameter +
        this.secondParameter -
        Math.floor(Math.random() * 2);
    }
    return resultFalse < 0 ? 0 : resultFalse;
  };
}

decorate(PracticeStore, {
  firstParameter: observable,
  secondParameter: observable,
  isCorrect: observable,
  point: observable,
  FirstParameter: computed,
  SecondParameter: computed,
  IsCorrect: computed,
  Point: computed,
  setFirstParameter: action,
  setSecondParameter: action,
  setPoint: action,
});

const practiceStore = new PracticeStore();
export default practiceStore;

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 :v

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