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

1. Update cho chức năng Practice

Ở màn hình practice, chúng ta sẽ thêm chức năng đếm thời gian cho nó, có nghĩa là người dùng phải trả lời câu hỏi trong 1 thời gian hạn định, nếu đúng sẽ được thêm 1 điểm và thời gian reset lại từ đầu, nếu sai thì sẽ bị chuyển trực tiếp tới màn hình failed và trò chơi kết thúc.

Đầu tiên, chúng ta sẽ thêm vào thư viện sẽ dùng để tạo ra counter components để đỡ mất thời gian code, đó là thư viện react-native-countdown-component :

yarn add react-native-countdown-component

Mọi người có thể vào link của nó để đọc thêm về cách dùng:

Giờ chúng ta sẽ apply nó vào trong practice import CountDown from 'react-native-countdown-component';, và tạo ra component CountDown như sau:

<CountDown
   id={`counter-${CounterStore.IsReset}`}
   until={kCounterNumber} // kCounterNumber ở đây mình đặt là 10 nha.
   onFinish={() => Navigate.navigate(StackRoute.Main.Failed)}
   size={spaces.space4}
   timeToShow={['S']}
   timeLabels={{s: ''}}
   digit>

Nếu chú ý 1 chút và có theo dõi series từ đầu, bạn sẽ thấy ở đây đã có 1 sự xuất hiện của 1 store mới, đó là CounterStore, code của nó cũng khá là ngắn thôi, nhưng mình vẫn thích rõ ràng và tách biệt nên vẫn tách hẳn ra 1 store, đây là code của nó

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

class CounterStore {
 @observable isReset = false;

 @action reset() {
   this.isReset = !this.isReset;
 }
 @computed get IsReset() {
   return this.isReset;
 }
}

const counterStore = new CounterStore();
export default counterStore;

Ngoài ra còn phải >CountDown nữa

const >

và đây là phun-sụt-cốt của file practice.js

import {observer} from 'mobx-react-lite';
import React, {useState, useEffect} from 'react';
import {>

2. Update animation và thêm lottie animation

Chúng ta trở lại màn hình welcome nhé, các bạn có còn nhớ ở các bài trước, chúng ta đã tạo animation cho dấu hỏi, nhưng animation đó chỉ chạy được lúc mới vào 1 tí, và nhìn nó thật ra là hơi chán. Giờ chúng ta sẽ cho cái dấu hỏi đó xoay vòng vòng liên tục để làm điểm nhấn cho app và thêm 1 hình động vào trang welcome để nhìn app dễ thương hơn.

Nhưng trước tiên, tìm hiểu lottie là gì đã nhé, vào link này để biết thêm chi tiết: , sau khi tìm hiểu lottie thì chúng ta sẽ vào thư viện của nó để lựa 1 cái về để bỏ vào app của chúng ta: . Với mình thì mình chọn animation rocket đang bay (), và mún dùng nó thì chúng cũng phải cài thư viện của lottie vào yarn add lottie-react-native và import vào welcome import LottieView from 'lottie-react-native';. chúng ta download file json trong thư viện của lottie và cũng import nó vào welcome lun import {AnimationRocket} from '../assets/animations/index'; mình đã tạo thêm folder animations để chứa file animation json của lottie.

Và đây là Component của Lottie khi apply vào app

  <LottieView
    ref={animation => {
      this.animation = animation;
    }}
    >

bạn nhớ thêm đoạn này useEffect nữa nhé this.animation.play();. Vầy là về cơ bản chúng ta đã thêm lottie vào app, đây là code của welcom.js sau khi sửa:

import React, {useState} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {>

Đó là lottie, chúng ta vẫn còn 1 nhiệm vụ là update animation của dấu hỏi, để sửa nó thì chúng ta vào file workingSection.js, các bạn copy y nguyên đoạn code này của mình nhé, chứ giờ mà ngồi giải thích làm sao để làm được cái animation này thì cũng dài bằng 1 bài viết này rồi (yaoming)

import * as React from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {View, >

Nếu bạn chú ý kỹ thì đoạn code chủ yếu chúng ta sửa để thay đổi animation là ở đây

  const rotateY360deg = new Animated.Value(0);

  rotateY360deg.interpolate({
    inputRange: [0, 6],
    outputRange: ['0deg', '360deg'],
  });

  useFocusEffect(
    React.useCallback(() => {
      Animated.sequence([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.loop(
          Animated.timing(rotateY360deg, {
            toValue: 6,
            duration: 1000,
            useNativeDriver: true,
          }),
        ),
      ]).start();
    }, [fadeAnim, rotateY360deg]),
  );

Nếu bạn có hứng thú với nó, hãy tìm hiểu thêm về Animated.sequence và Animated.loop nhé

3. Chỉnh sửa, fix bug lặt vặt

Trong bài viết lần này, chủ yếu là để nâng cấp app lên, nhưng vì nâng cấp lên như vậy nên cũng sẽ có 1 số "tính năng" được sinh ra trong lúc code (ahihi). Vì vậy chúng ta phải chỉnh sửa 1 tí, cụ thể là ở trong file failed.js, chúng ta sẽ bỏ mục chọn 2 option là chơi battle hay practice, thay vào đó sẽ cho nó điều hướng lại màn welcome. code cụ thể sẽ như này:

import React, {useState} from 'react';
import {>

Đó là chính sửa ở failed.js, giờ mình sẽ thêm nút back lại trang home ở cả 2 chế độ practice và battle, nút reset câu đố trong chế độ practice. Tất cả chỉnh sửa chúng ta sẽ viết trong file PointSection.js

import * as React from 'react';
import {Image, View, >

Giờ thì chúng ta đã update xong cho cái app rồi đấy, nhìn thành quả tí nhé:

4) Chạy thử nè

Nhìn màn welcome sau khi update nè:

Giờ app của chúng ta đã có điểm nhấn rồi, vào chọn chế độ chơi thôi

Vào chơi practice để kiểm tra tính năng counter mới nhé

Nhìn cũng ổn ổn nhỉ, khi thua sẽ qua màn hình failed, bạn sẽ thấy cả dấu ! giờ cũng xoay xoay lun

Bài viết lần này của mình đến đây là đã hết, cảm ơn các bạn đã chịu khó đọc và hẹn gặp lại vào phần tiếp theo trong 1 ngày không xa.

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.