Reactnative-js calling native Method instance code (reprinted)

The first step is to first create the Reactnative module class inheritance 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 implementation Reactpackage put each module in the 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 this react Package Manager in the application portal

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 to provide a nativemodules called by the 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);

Reactnative-js calling native Method instance code (reprinted)