React Native Android Application layer in combat

"Craftsman Joshui Http://blog.csdn.net/yanbober without permission to reprint, please respect the author's labor results." Private Messages Contact Me "

1 Background

In the blink of a year, the last small goal of this year (React Native) seems to leave any trail to next year, React Native want to say love you not easy. What's your opinion? Application layer JSX Writing is still very friendly, and the various pots of the frame access to make people cry bitterly, everything at the beginning of difficult, for React Native Access can say that a lot of work may need to invest in the framework access (a variety of gray experiment compatibility, a variety of pots), once the access is stable really is tasted sweetness, However, the stable access to the framework so far still requires a lot of time. That being the case, in order to be coherent then first to a fake access after the sweetness-React Native development (Android development angle to achieve React Native JS application).

Below to share a React Native based on the Android version of the personal real-time project, in order to record personal learning and use React Native some of the summary; This article is a summary of the 1.X version of this project, 2.X and other versions of the summary of the completed and verified after the master to do In the pit summary, so this article will be relatively simple.

This project open source address: https://github.com/yanbober/RNPolymerPo

"Craftsman Joshui Http://blog.csdn.net/yanbober without permission to reprint, please respect the author's labor results." Private Messages Contact Me "

2 Project Sharing

Rnpolymerpo (point me to open source code for this project), an Android life aggregation application based on React Native, was written to collate some of the techniques used to summarize the use of React Native, using the tools Android Studio &am P Visual Studio Code & Chrome, below we describe the shape of the project separately.

2-1 Project Framework

The whole project uses React Native JS to write, data statistics and application distribution using Dandelion test platform, background using aggregated data and other related free API interface. The core interface includes Splash advertising Countdown splash screen page, main interface (including suspended ball), featured pages, News Category View page, Personal Center page, online robot customer Service Chat page, Universal WebView jump page, complete simulation of a regular enterprise application of the common page to deal with, This can be compared with the system learning React Native JS writing skills and pit record, the whole project uses React Native and supporting React Native Redux framework, the specific Package.json depends on the following:

{  ...... "Dependencies":{    "react":"15.4.1",    "react-native":"0.38.1",    "React-redux":"^4.4.6",    "Redux":"^3.6.0",    "Redux-thunk":"^2.1.0",    "React-native-swiper":"^1.5.4",    "React-native-scrollable-tab-view":"^0.6.0",    "React-native-tab-navigator":"^0.3.3"  }}

2-2 Splash Open Screen AD Countdown page

Approximate effect such as (actual start-up simulation random get service end an ad image, formally can be replaced with WebView, and so on, and then the picture to fade out the display, the picture is displayed in the upper left corner of the ad, the lower right corner of the 5 S Countdown full Screen open screen):

Involving knowledge points and handling techniques:

• Pay attention to the concept of open screen, after the display into the Application home page and click Back can no longer display, so when using the Navigator component from the Splash page to jump Home pages to use the Navigator Replace and other methods to replace the current stack, to avoid back again Splas H page.

• React Native Animation performance on some Android devices is still a bit worrying, so you can omit it and try not to use it.

2-3 Home Page Trend Life Tab page

The approximate effect, as can be sliding up and down, so the React Native ListView to achieve the parent layout, the top toobarandroid for their own re-packaged ActionBar components, loop Banner using open source Components React-native-s Wiper implementation, followed by 10 categories using two-time package of the ListView implementation, the perpetual calendar for the general layout, the above all as a ListView Header rendering, the following movie list as the ListView item rendering, all modules access their own server interface.

Involving knowledge points and handling techniques:

• React Native ListView is the flexible use of Android (RN ListView has a performance problem and it is best to seek alternative solutions).

• The floating ball layout technique is implemented using the absolute position of the React Native style.

• React-native-swiper Open Source Component Learning (can not only use, to learn how people can customize RN pure JS layer components, the essence is also ScrollView related attribute combination control implementation, similar to Android customization, because the essence is the Android side of the various to Uch event passed over to change the term, the cat is the microphone, MI is the truth of the cat).

• The bottom column uses React-native-tab-navigator, the essence still is wants to study the person's writing, after all is writes the Android, although knows is the event control, but also must learn some people's high quality JS writing, the essence must learn is the nimble grasps how to encapsulate the component and the Switch tab when The handling of RN state.

2-4 featured Tab page

The actual effect is as follows, the data comes from the free Api,json format, mainly is the page loading of the GridView use of tips summary, pull-up can load more pages, 10 item per page.

Involving knowledge points and handling techniques:

• React Native ListView Flexible application, pagination loading of component implementation skills and with the Redux page loading processing skills.

• The ListView is encapsulated into a GridView technique (note the key value setting of item to avoid unnecessary performance problems).

2-5 Personal Center Tab page

Effects such as, specifically using ScrollView (no ListView is to try to use as much as possible in a project to practice using as many as possible React Native components), relatively simple, not too much skill involved.

Involving knowledge points and handling techniques:

• General React Native Document interface use skills, no tricks.

• The item recommended content is worth replying to.

2-6 Current Life Tab page news category page

The specific effect is as follows, the essence is viewpager left and right sliding, using the React-native-scrollable-tab-view open source components, feel the author JS Foundation or very powerful, lazy loading page, each page for the ListView item rendering, Data is derived from the aggregated data free API JSON interface.

Involving knowledge points and handling techniques:

• React-native-scrollable-tab-view component use, is still studying the details of the implementation of this component customization, there is no time to elaborate a result, the foreigner is still very powerful, worship.

• The regular rendering of the ListView, when the data is pulled in different states, the page renders different components, such as Loading, item, and so on, more in line with the real production environment (note the key value setting of item, avoid unnecessary performance problems).

2-7 Personal Center online Robot Customer Service page

The specific effect is as follows, data from the aggregation data free Turing man API, mainly simulates the development of IM type application, the essence of React Native of the ListView with related skills to complete, basically similar to a simple IM interface.

Involving knowledge points and handling techniques:

• Chat interface data using JS array to save, each conversation both sides of the data through the REDUX send trigger state and then in the Chat interface render insert interface predefined array and then refresh the interface (State optimization, do not store too much data, and as far as possible to mark).

• Two chats the item layout uses the same encapsulated component, only to make a dynamic layout based on whose type determines what style to use.

• After the keyboard input chat automatically swipe up using the React Native ListView Self-performance of a pit implementation, that is, every time the item refreshes the ListView Header, Footer will be refreshed, so we can pass Footer onlayou The T method obtains the ScrollTo slide of the ListView so as to realize the IM Chat auto-slide screen.

• Temporarily there is a pot has not found the reason, the keyboard pop-up some firmware on the probability of ToolBar was top up, pit dad.

2-8 General RN WebView page

Similar to conventional Android application development, we generally design a common application of different parameters to pass the WebView interface, support the Web multi-level page GoBack operation, support Web other operations, pure Android WebView packaging use, in this application based on different Parameters display featured details, news details, movie details, personal Center technical recommendations and more.

Involving knowledge points and handling techniques:

• React Native WebView A probabilistic Web multilevel page GoBack crashes on some firmware.

• Note the WebView page multi-level page physical back key support and JS injection techniques (similar to the JS injection in Android).

The above is a simple summary of the current project, the next major optimization to adapt to multi-language, night mode, compatibility crash!!!!!!!! So wait until the adaptation completes the roughly compatible test before you write the 2.0 release summary.

"Craftsman Joshui Http://blog.csdn.net/yanbober without permission to reprint, please respect the author's labor results." Private Messages Contact Me "

3 Project Summary

To this for an Android development, I can only say that I was the fall, or look forward to myself as soon as possible when the framework access to the compatible pot bar, so that the platform after the React Native application layer of the JSX to realize the business is really once and for all, all the beginning difficult ah, difficult to the sky ah. However, to say a digression, through the React Native learning also prompted me to JS learning desire, even if the future React Native really not be optimistic about the time of their own no loss, because not only learned the front-end of some things also on the multi-platform features have a knowledge, more importantly React Native The framework of the source of the reading can also be a grasp of their own architecture, ideas, code style and other aspects can be improved. Is it not a good thing to think so? also tube so many React Native value is not worth to study, value is worth to be optimistic of gossip why? Or the old saying, the deeds speak louder than words.

All in all, React Native the first version of the framework access must be painful, but once the framework is stable is to benefit the public, it is obvious.

This project open source address: https://github.com/yanbober/RNPolymerPo

PS: Several nights no regular routine, so late to sleep in order to tidy up this thing, lest later forget, good memory than bad blog, sin Ah!

"Craftsman Joshui Http://blog.csdn.net/yanbober without permission to reprint, please respect the author's labor results." Private Messages Contact Me "

React Native Android Application layer in combat