1. Based on React Native 0.63.2, use the react-native init rn_native command to create a new project

2. How does RN call native methods

3. Create the React package in the Android directory

createAlertModule.java RnNativeReactPackage.javaFile;

4. Let’s start with the implementation

Alertmodule. Java file:

import android.app.AlertDialog; import android.widget.Toast; import androidx.annotation.NonNull; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; public class AlertModule extends ReactContextBaseJavaModule { private ReactApplicationContext mContext; public AlertModule(ReactApplicationContext reactContext){ super(reactContext); mContext = reactContext; } @NonNull @Override public String getName() { return "AlertModule"; } @reactMethod public void toast(String message){ @ ReactMethod callable method in js Toast. The makeText (getReactApplicationContext (), the message, Toast. LENGTH_SHORT), show (); } @ReactMethod public void alert(String title,String message){ AlertDialog.Builder tDialog = new AlertDialog.Builder(getCurrentActivity()); tDialog.setTitle(title); tDialog.setMessage(message); TDialog. SetPositiveButton (" sure ", null); TDialog. SetNegativeButton (" cancel ", null); tDialog.show(); }}Copy the code

AlertModule ReactContextBaseJavaModule class hierarchy, in which the * * getName () method returns the name of the * * is the module name in the JavaScript, Js actual call this module such as: const Alert. = NativeModules AlertModule; Note: @reactMethod, if you want to write a method called in JS, you need to add @reactMethod in front of the method, so that js can pass

const Alert = NativeModules.AlertModule
Alert.toast();
Copy the code

call

2, RnNativeReactPackage. Java file:

package com.rn_native.react;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class RnNativeReactPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new AlertModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return  Collections.emptyList();
    }
}

Copy the code

This file is used to register AlertModule modules. If the module is not registered, js cannot be accessed (this action is often forgotten). If you subsequently create a new module of your own, TestModule

· · · · · · modules. The add (new AlertModule (reactContext)); modules.add(new TestModule(reactContext)); .Copy the code

3. The next step is also important: mainApplication.java

. public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { List<ReactPackage> packages = new PackageList(this).getPackages(); packages.add(new RnNativeReactPackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; }}; . }Copy the code

Add RnNativeReactPackage Package package to the getPackages method of the mainApplication. Java file;

Now that the Android native part is complete, I’ll show you how to use it in JS.

App.js

import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity, NativeModules, } from 'react-native'; const Alert = NativeModules.AlertModule; Export Default class App extends react.ponent {_toast = () => {alert.toast (' I called the native toast method '); }; _alert = () => {Alert. Alert ('title', 'I called the native Alert method '); }; render() { return ( <View style={styles.center}> <TouchableOpacity onPress={this._toast} style={styles.toastTou}> <Text Style ={styles.titleText}> Call native toast</Text> </TouchableOpacity> <TouchableOpacity onPress={this._alert} style={[styles.toastTou, {marginTop: 30}]}> <Text style={styles.titleText}> Call native Alert</Text> </TouchableOpacity> </View>); } } const styles = StyleSheet.create({ center: { flex: 1, justifyContent: 'center', alignItems: 'center', }, toastTou: { width: 200, height: 40, borderRadius: 20, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center', }, titleText: { fontSize: 14, color: '#fff', }, });Copy the code

The first step in js const Alert = NativeModules. AlertModule; AlertModule is the name of the module returned by getName, which declares the module.

The second step is to use the *** alert. toast method (‘ I called the native toast method ‘); Alert. Alert (‘title’, ‘I called the native Alert method ‘); *** calls native custom methods.

React Native calls to Android native methods.