Chat bubble in react native and countdown of sending verification code encapsulated by timer

In fact, today I would like to summarize all the pitfalls I have encountered recently:

1. There are two methods for cross page Jump of goback. One is to modify the navigation source code like brother rabbit, and the other is to use navigationactions

2. For the value transfer of parent-child components, one can use callback, two can use PubSub to publish and subscribe, and three can use manager event listening (there are two forms of content to be displayed on page A. one is to actively receive from the manager, that is, you don't need to click to obtain data, but to monitor the changes of data in the manager from time to time. The second form of content to be displayed on page a is to click to start and obtain)

3 what we need to say is that navigation is a static stack variable in navigationoption, and this cannot appear in it, so a problem will arise. For example, put an add button in headerright in navigationoption, and click the Add button to launch a new page. In the past, the common method was PubSub to publish and subscribe, while the rabbit said to use setparams, However, they can achieve the corresponding functions, which is only a matter of advantages and disadvantages. There is also the animation problem of navigation. There are many problems in the development of navigation. My growth process is from Expo practice demo to mixed development recommended by the official website. I felt a lot along the way, but I still miss the coding when I used to be a website. Why? It was younger then!

OK, let's talk about the layout of chat bubbles

Code running effect:

Timer encapsulates the countdown of sending verification code

In daily work, the countdown component is indispensable. At present, many countdown components will stop or disorderly when the application enters the background. Next, let's implement a usable and highly interactive example.

1 -: when the countdown is over, execute the callback and restart the timing;

Let's start with the source code. First, package a timer component

The code is as follows

Called where needed

The code effect is as follows

summary

The above is the chat bubble in react native and the countdown of sending verification code encapsulated by timer introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!