ReactNative-JS calls native method instance code (reproduced)

The first step is to create a ReactNative module class that inherits ReactContextBaseJavaModule

package com.mixture;

 

import android.content.Context;

import android.widget.Toast;

 

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

 

public class MyNativeModule extends ReactContextBaseJavaModule {

 

   public static final String REACTCLASSNAME = "MyNativeModule" ;

   private Context mContext;

 

   public MyNativeModule(ReactApplicationContext reactContext) {

     super (reactContext);

     mContext = reactContext;

   }

 

   @Override

   public String getName() {

     return REACTCLASSNAME;

   }

 

   /**

    * 必须添加反射注解不然会报错

    * 这个方法就是ReactNative将要调用的方法，会通过此类名字调用

    * @param msg

    */

   @ReactMethod

   public void callNativeMethod(String msg) {

     Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();

   }

}

 

The second step is to create a React package manager that implements ReactPackage and puts each module into a module collection

 

package com.mixture;   import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; 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;   /**   * Created by Administrator on 2016/9/22.   */   public class MyReactPackage implements ReactPackage {      @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {      List<NativeModule> modules = new ArrayList<>();      modules.add( new MyNativeModule(reactContext));      return modules;    }      @Override    public List<Class<? extends JavaScriptModule>> createJSModules() {      return Collections.emptyList();    }      @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {      return Collections.emptyList();    } }

The third step is to register the React package manager at the application entry point

package com.mixture;

 

import android.app.Application;

import android.util.Log;

 

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

 

import java.util.Arrays;

import java.util.List;

 

public class MainApplication extends Application implements ReactApplication {

 

   private final ReactNativeHost mReactNativeHost = new ReactNativeHost( this ) {

     @Override

     protected boolean getUseDeveloperSupport() {

       return BuildConfig.DEBUG;

     }

 

     @Override

     protected List<ReactPackage> getPackages() {

       return Arrays.<ReactPackage>asList(

           new MainReactPackage(),

           //在应用中注册这个包管理器

           new MyReactPackage()

       );

     }

   };

 

   @Override

   public ReactNativeHost getReactNativeHost() {

     return mReactNativeHost;

   }

}

The fourth step is to call react-native in ReactNative and provide a NativeModules to call by module name and method name

/**   * Sample React Native App   * https://github.com/facebook/react-native   * @flow   */   import React, {Component} from 'react' ; import {    AppRegistry,    StyleSheet,    Text,    View,    NativeModules, } from 'react-native' ;   class Mixture extends Component {    render() {      return (        <View style={styles.container}>          <Text style={styles.instructions} onPress={() => this .onClick()}>            调用用原生方法          </Text>        </View>      );    }      /**     * 调用原生方法     */    onClick() {      NativeModules.MyNativeModule.callNativeMethod( '成功调用原生方法' );    } } const styles = StyleSheet.create({    container: {      flex: 1 ,      justifyContent: 'center' ,      alignItems: 'center' ,      backgroundColor: '#F5FCFF' ,    },    instructions: {      textAlign: 'center' ,      color: '#333333' ,      marginBottom: 5 ,    }, });   AppRegistry.registerComponent( 'Mixture' , () => Mixture);