React-native High Imitation "nuggets" client __react-native

After 3 weeks of time, the first two weeks and the exam, using some trivial time, finally the basic interface of the app to complete the function. Let's take a picture first.

The use of react-native 0.36 version of development, is a lot of the pit, to a simple summary of it.

To tell the truth, an application of user loyalty, the UI is absolutely a big relationship, which is my imitation of the Nuggets client a reason bar, the interface involved enough to fancy. Take the first page of this picture,

To implement such a diagram, you need layers of nesting, also consider the right and left, so the basic "home" layout can be made, most of the basic layout can be done, but also the basic is a look at how to know how to cloth, I finished this page layout, behind the "I" page inside those are very simple. If you're a top-end player, it's a different story.

When I was doing this app, considering the dual platform, the code considered the differences between many two platforms, as well as highlighting the unique characteristics of the respective systems, For example, the Android5.0 button has feedback effect, so I chose Touchablenativefeedback as the button on the Android platform, but this is not compatible with iOS, so select Touchableopacity as the button for the platform. Use a three-wood operator or separate to make if judgments to achieve the results of their respective platforms.

There is also a need to consider the problem of multiresolution adaptation, at the beginning I was in the 2K resolution design, change to another resolution under the ratio of the interface has changed, not the whole becomes smaller is the overall size, so the online check, there is no good way, only to write a function of their own to recalculate the sizes. such as the size of the word, long width. Margin,padding these all need to calculate, but Borderradius, will be a small bug. and the finest line, the 1-pixel-wide line, can be obtained using 1/pixelratio.get (). The specific code can find the source code inside util under the PX2DP this function.

From this project you can also learn the communication between components, including the father to the child, this simple. The child to the father, and the complex situation is implemented using the Observer pattern. But this react-native has been encapsulated one, can be used directly.

There are white screen problems, I believe that there are many tutorials on the internet, we have seen, here is not much to say.

What else ... It seems to be the same. This is my first react-native project, so there must be a lot of code written not perfect place, but also please forgive me, learn from each other. At this point, the project still has a lot of features do not complete, but the basic complex interface I have been over, those very simple interface I have not realized again, interested can fork continue to improve.

In addition, the data acquisition is grabbed by the bag, and their hot algorithm did not delve into, just to get data typesetting and practice, entirely for learning purposes, and no malice, but also please "Nuggets" team Haihan, haha. Finally paste the effect of other interfaces, the warehouse will be released at the end ~ ~

GitHub address here, click Open. I hope you can give a star, thank you ~