This article is a serialized version of my book React Native Solution and Practice, published by China Machine Press. The book explains the basic principles of the React Native framework, the layout of React Native components, the introduction of components and apis, and the practice of code. React Native and iOS, Android platform hybrid development of basic principles and code demonstration, selected a large number of examples of code, convenient for readers to learn quickly.
Learn how to React Native with a book. Learn how to React Native with a book. Learn how to React Native with a book.
For all related information, please visit:rn.parryqiu.com
This chapter continues to introduce the principles and practices of hybrid development on the Android platform. Meanwhile, we can have an in-depth understanding of the communication mechanism between React Native and the Android platform.
12.1 Introduction to Hybrid Development on the Android Platform
As with iOS hybrid development, sometimes we encounter a Native Android API that the React Native framework does not provide, so we need to do hybrid development of the React Native platform and Android platform ourselves. Also, hybrid development can leverage existing Android native platform code and can be used to develop high-performance, multithreaded requirements scenarios.
The design of React Native framework also provides the possibility of hybrid development for Android Native platform, which is still a high-level part of React Native development. Before development, it is necessary to master the development language and development process of Android Native platform. Learn how the React Native platform communicates with Android.
The way to learn is to combine a small practical example with code when explaining principles, rather than just explaining conceptual things in an empty way, so that people can understand. Finally, we will complete a small practical example to deepen the understanding and application of the hybrid development of React Native framework and Android platform.
12.2 The Principle of Hybrid Development on the Android platform
We follow the mode of learning the mixed development of iOS platform. Here, we continue to combine a small example to learn the principles and methods of the mixed development of React Native platform and Android platform.
Hybrid development of Android platform mainly includes the following steps:
- Implement Native functionality for React Native calls in Android projects via Native code;
- Register the written function modules in the Android project;
- Define the Android package of function modules;
- The React Native project uses JavaScript code to invoke the Native features of the Android platform implemented by hybrid development.
Complete code in the book companion source 12-02 folder.
12.2.1 Implementation of Android native code
First, use the React Native CLI to initialize an empty project named NativeAndroidModule. Figure 12-1 shows the project initialization process.
Use Android Studio, the development tool of the Android platform, to open the Android folder in the project folder and import the folder, as shown in Figure 12-2.
Note that if you open the project folder for the first time, Android Studio will automatically download Gradle and use Gradle to build your project. Make sure your network environment is free and wait patiently for the project to load, as shown in Figure 12-3.
Import the project using Android Studio and open it, as shown in Figure 12-4.
New Android Native platform’s class to inherit from the React Native framework provided by the parent class ReactContextBaseJavaModule, here is our new class named MyModule.
If there is no import ReactContextBaseJavaModule package, Android Studio will prompt you for the introduction of the package, as shown in figure 12-5.
The new file code is shown below.
1. import com.facebook.react.bridge.ReactContextBaseJavaModule;
2.
3. public class MyModule extends ReactContextBaseJavaModule {
4.
5.}Copy the codeAfter inherited ReactContextBaseJavaModule the superclass, need to implement method getName return to the module name, and add the class constructor, KeepScreenAwake and removeScreenAwake are two methods that call the Android native API to keep the screen on and turn it off. The complete myModule.java code is shown below.
1. package com.nativeandroidmodule;
2.
3. import com.facebook.react.bridge.ReactApplicationContext;
4. import com.facebook.react.bridge.ReactContextBaseJavaModule;
5. import com.facebook.react.bridge.ReactMethod;
6.
7. public class MyModule extends ReactContextBaseJavaModule {
8.
9. ReactApplicationContext reactContext;
10.
11. public MyModule(ReactApplicationContext reactContext) {
12. super(reactContext);
13. this.reactContext = reactContext;
14.}15.
16. @Override
17. public String getName(a) {
18. return "MyModule";
19.}20.
21. @ReactMethod
22. public void keepScreenAwake(a) {
23. getCurrentActivity().runOnUiThread(new Runnable() {
24. @Override
25. public void run(a) {
26. getCurrentActivity().getWindow().addFlags(
27. android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
28.}29.});30.}31.
32. @ReactMethod
33. public void removeScreenAwake(a) {
34. getCurrentActivity().runOnUiThread(new Runnable() {
35. @Override
36. public void run(a) {
37. getCurrentActivity().getWindow().clearFlags(
38. android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
39.}40.});41.}42.}Copy the codeSimilarly, other Native methods of the Android platform can be added in this way and then called in React Native JavaScript code.
12.2.2 Android Native Module Registration
Next we need to create a class that implements the interface functions of ReactPackage and registers the native modules. Here we will name this file myModulePackage.java. And implement interface createNativeModules and createViewManagers two methods. Here we use createNativeModules to register modules and createViewManagers to return null values.
The final complete code looks like this, noting the definition on line 19.
1. package com.nativeandroidmodule;
2.
3. import com.facebook.react.ReactPackage;
4. import com.facebook.react.bridge.NativeModule;
5. import com.facebook.react.bridge.ReactApplicationContext;
6. import com.facebook.react.uimanager.ViewManager;
7.
8. import java.util.ArrayList;
9. import java.util.Collections;
10. import java.util.List;
11.
12. public class MyModulePackage implements ReactPackage {
13. @Override
14. public List<NativeModule> createNativeModules(
15. ReactApplicationContext reactContext) {
16. List<NativeModule> modules = new ArrayList<>();
17.
18. modules.add(new
19. MyModule(reactContext));
20.
21. return modules;
22.}23.
24. @Override
25. public List<ViewManager> createViewManagers(ReactApplicationContext
26. reactContext) {
27. return Collections.emptyList();
28.}29.}Copy the code12.2.3 Android Package Definition
In the mainApplication.java file in the project, we need to include our own native packages, which we can add to the getPackages function.
1. package com.nativeandroidmodule;
2.
3. import android.app.Application;
4.
5. import com.facebook.react.ReactApplication;
6. import com.facebook.react.ReactNativeHost;
7. import com.facebook.react.ReactPackage;
8. import com.facebook.react.shell.MainReactPackage;
9. import com.facebook.soloader.SoLoader;
10.
11. import java.util.Arrays;
12. import java.util.List;
13.
14. public class MainApplication extends Application implements ReactApplication {
15.
16. private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
17. @Override
18. public boolean getUseDeveloperSupport(a) {
19. return BuildConfig.DEBUG;
20.}21.
22. @Override
23. protected List<ReactPackage> getPackages(a) {
24. return Arrays.<ReactPackage>asList(
25. new MainReactPackage(),
26. // include our custom native component package
27. new MyModulePackage()
28.);29.}30.
31. @Override
32. protected String getJSMainModuleName(a) {
33. return "index";
34.}35.};36.
37. @Override
38. public ReactNativeHost getReactNativeHost(a) {
39. return mReactNativeHost;
40.}41.
42. @Override
43. public void onCreate(a) {
44. super.onCreate();
45. SoLoader.init(this./* native exopackage */ false);
46.}47.}Copy the codeThe file structure is shown in Figure 12-6 after the Android native is developed.
