The company doing to prepare the next generation of cross-platform mobile terminal project, the original phonegap framework has been unable to meet demand, because of its relatively cumbersome dom operation, slightly less than our lackluster performance and optimization, so this is really a little bit unbearable hybrid App burden.
- In routing switch, the larger the page, the animation will be Caton
- Some non-native components, such as maps, rendering performance can not keep up, gesture support is also not perfect, the lack of native experience. .
So, we discussed React-Native and Flutter kind of cross-platform development framework, RN communities feel that the current is relatively large, and there is no limitation of DSL . Of course, cross-platform Flutter personally feel that some of the more thorough, better performance and flexibility. RN is determined to be the front-end dev options, so ... started
Environment to build
For developers compile React-Native Android version requires JDK1.8 + Android SDK , so it is best to install android android studio direct management of the project. Official cli react-native is very easy to use, defaults yarn to manage dependencies.
-g REACT-Native install npm cli-
REACT-Native the init [Project Name]
cd project directory && react-native run-android
or react-native start
A few steps you can start the first compiler package rn this project. However, there are many pits need to tread:
First understand the structure under the project
This map is a bit long, but logic is the root page components App.js react in order to compile a corresponding android project , in my rough knowledge of native android development seems, rn of JSMainModule is index.js entrance file, corresponding to the android mainApplication and MainActivity , so the need mainApplication.java lib import corresponding native example basic ReactApplication, rn some additional libraries are native android package assembly.
Because React App are generally single-page program, corresponds to react-native, too, although we have multiple routes, but the corresponding AndroidManifest.xml, but only one Activity. Generally, all the routing jumps have taken place in this Activity in. In a subsequent further it may involve the use of Intent to complete the inter-application communication.
Communication logic ends
We React to write the UI components and native components between a layer mapping relationship, this relationship is made React-Native of UIManagerModule core module to manage, additions and deletions will operate the corresponding UI components of the native assembly. At least in a debug state, as shown in FIG first, Metro Bundler is provided Facebook JS Bundler , we may be on the mobile device the heat load of the JS file after the change . These JS modules written in C ++ by RN app bridge to native components and communication, onPress, onPressIn or onLongPress true trigger (such dispatch a touch event is my guess).
Concrete implementation of the development, support thermal load in debug state, as long as the mobile device and the host in the same local area network, for the first time debug version of the apk through USB installed, you can heat load JS bundler through wifi, so easy to debug. Specifically provided open interface dev settings- app> && the debugging Server Host Port , the IP address of a host configured: to 8081
Some interesting process subsequent re-record it, such as what the chart library, both can interact with the RN, the animation is also quite well. There are routing management is also a basic and complex job.
Reference material
https://facebook.github.io/react-native/docs/getting-started
wait-what-happens-when-my-react-native-application-starts