The analysis of Food app architecture--the products of Beijing Foods Technology Co., Ltd.

As the saying goes not to fight unprepared for the war, this is really a bit crazy, suggesting that you go to the interview, especially to small internet companies, if you want to be competitive with others, then you have to study the current his company is developing products, their business type, such as their company is developing Xxxapp , you can spend two days, do a xxxapp demo, and so on to the interview, you can have the confidence to say, I studied your company's business, your company's products are very interested in the way to do a demo, and then you put the packaged app on your mobile phone run, to technology to see, Basically this offer belongs to you, be sure to do something before you do things, the old saying everything is not pre-waste, pre-force! (Small series in the interview the day before yesterday to eat a great loss, so, summed up, share to Yimeimei, tens of thousands of brains AH) good, next we analyze the framework of the food app, see what technology used in it.

A few pictures, let's retrace, step by step.

These three graphs demonstrate a process from application launch to startup OK to load out the main menu, here we simply say the pit.

1.React Native Start Page white screen phenomenon, (with React native architecture, whether it is Android app or iOS app, white screen appears on startup, the time is probably 1~3s (depending on the performance of the phone or simulator different)

Why Why is there a white screen?

The React native application reads the JS bundle into memory at startup and finishes rendering. During this time because the JS bundle has not finished loading and rendering, so the interface is displayed white screen.

White screen to people feel very unfriendly, there is no way not to show white screen it?

Explained above: Why the React native application will display a white screen at startup. Now that we know the cause of the problem, it is not far away from solving the problem. Most apps on the market will start with a splash screen, start screen for the user is more friendly, one to display welcome information, and display some product information or some ads, start page for the program, is to complete the initialization of the program to load data, do some initialization work of the time reserved, Start screen waiting time can be long and short, depending on the business.

Solution: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 (refer to this blog)

2. After starting to enter the main page, the layout is still simple, if according to my solution, the main take stacknavigator+tabnavigator, it can be seen that the app has three tab,

The first tab is the target, his layout from the top down, the first use of third-party, cassette-based Carousel, to make a carousel chart effect, or simply use <ScrollView></ScrollView>

Further down, use a <View> pack of four <TouchableOpcity> do a specific event handling

Continue down the latest recommendations and hot recommendations, I think should use flatlist to do, but I see the more I do not want to do with flatlist, it is a bit <WebView> style, directly loaded over.

The tip is to make a logical judgment when clicking on a personal health report, and then make a friendly note, obviously to see the personal Health report to add a member first.

is a feature I appreciate for this app, (the app has two modules, I personally feel good, one is the module, the other is the app with the ruler of the third party, I feel Good)

First analysis of the module function, the module can be different people to make a personal diet plan, different stages, different dates, to make the corresponding early and late meals of the reasonable collocation, very good, this piece needs to make complex processing backstage, the front desk display, to is also can, then the next thing to say, frankly can see to. (title that the return arrow is too ugly, and can be seen, is not a person to do, or that, two people develop, did not reach the corresponding agreement, not a unified) title under the "Diet Plan" and "principle" of the small components, this use is too common, the market has, But half of the market is placed on the title, (such as boss directly hired) instead of this, the following things, I will not talk nonsense.

"Discover" This module, personally feel is to use <WebView> do, not much said!

"My" This module, first said my this tab, he is added the click event, because this module, only the person logged in, only the right to operate, if you do not log in, he will let you log in, only the user login, can see the look!

Ok so how to give tab click event?

Continue to improve tomorrow ... This app, backstage, can be put out in a week

Food app Architecture Analysis-Beijing Foods Technology Co., Ltd. products