Making Simple Math Learning Application With React Native – Part 3

Tram Ho

Hi guys, so I’m back to the series about simple math learning apps with React Native, through each article, I will gradually update the app by adding features and techniques to the app. If this is your first time reading articles about my series, here are the links of the previous sections: Part 1  and Part 2

This introduction must be enough: 3 can join us

1) Change app icon on android phone

You can choose whichever icon you like, note that choosing a square icon, because if you choose an icon with a different shape, it will be displayed incorrectly on your phone, changing icons for apps on Android is very simple, Just follow the link after the name-app-your- android app src main res , in which you will see 4 folders respectively mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi , in each folder, you will see 2 png files, ic_launcher_round.png and ic_launcher.png , you just delete it, and replace it with the icon you want and remember to rename it exactly . Simple, right: 3

2) The battle function in the app

Realizing that the user can only choose right and wrong with simple maths in the practice function, it will quickly become boring and cause the user to delete the app in 30 seconds after using it, so I will add it for It has a function for further interaction with other players, which is the battle function.

This function is quite simple to implement, which is to duplicate the practice screen and turn it upside down, so 2 people can confront each other directly, besides I also apply some more rules. Like, whoever gets 10 points first wins, if one answers wrongly, he / she will be deducted 1 point, correct will add 1 point, after answering a new question, it will continue. That’s my idea, let’s start now

First we need to add 2 variables in the route.js file of the Battle: 'Battle', Success: 'Success', practice page Battle: 'Battle', Success: 'Success',

Next we create 2 screens namely battle and success.

In this battle.js file, we reuse the range of functions already in the practice, but also customize it to suit 2 player play. For example, in the pressAnswer function, we will add a parameter called player to know which player to use, and add in the condition that if true will add 1, false will subtract 1, and who reaches 10 first wins.

In the interface of player1, I used the transform property to reverse the playing field of player 1 by 180%, so the two players will confront each other transform: [{rotate: '180deg'}], In addition, if you pay close attention, you will find that I wrote another store called BattleStore.js , here is its code

In mobx you can completely declare @observable as an object as I do with player1 = {point: 0}, temporarily it will only have a property point, later on developing more fields as name, rank, ….

A small note for those of you who do not know about this syntax, BattleStore[player${player}].point (or this[player${player}].point ) is equivalent to BattleStore.player1.point or BattleStore .player2.point, depending on the player variable I enter is 1 or 2.

So we added the battle function, but wait, there’s still one thing missing, it’s the winner notification screen.

3) The success screen announces the winner

We will design it based on the failed screen, however, it will only show the winner name and the replay button, so the interface will be much simpler, here’s the code for everyone to refer to:

We will show the name and announce the winner in different colors.

4) Total counting

So it looks like it’s done, let’s run it together.

Enter the game

Press play button, select play mode

Enter battle mode, sorry if its colors rape your sight

And when there is a winner

Rework another game to see who is better

My article is over here, hello everyone took the time to read and see you in the next part in a day. (^. ^) /

Share the news now

Source : Viblo