RN invoke native method of Android (implement toast effect)

The first clear point, the pit is too many ~ Magic Ah!

Ok!

Basic ideas:

1. Use as to open an existing project (you can open the project in the Android can also be Android inside the Build.gradle)

2. Create a new class in as, this class inherits Reactcontextbasejavamodule, and here the method of the original sound is called by the RN JS.

3. Create a new class in as to implement the interface Reactpackage, and put the class you just created into the package Manager

4. Add the Package Manager you just created to the MainApplication

5. Call on JS side (note: Need to re-run-android)

In the above five steps can be achieved basic call Android native method, how to achieve, preferably according to the official website described, here simply paste my own implementation of the Code:

Start with the second step:

Package Com.now;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;/** * Created by Xieyusheng on 2017/6/18. */public class Toastmodule extends Reactcontextbasejavamodule {    private Context mcontext;    Public Toastmodule (Reactapplicationcontext reactcontext) {        super (reactcontext);        Mcontext=reactcontext;    }    @Override public    String getName () {        //The name here should be cautious, not an RN component of the same        return "Toastmodule";    }    @ReactMethod public    void Rncallnative (String msg) {        toast.maketext (Mcontext,msg,toast.length_long). Show ( );    }}

3. Part III

Package Com.now;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 Xieyusheng on 2017/6/18. */public class Anexamplereactpackage implements Reactpackage {@Override public list<nativemodule> Createnativ        Emodules (Reactapplicationcontext reactcontext) {list<nativemodule> modules = new arraylist<> ();        Add to Inside Oh Modules.add (new Toastmodule (Reactcontext));    return modules; } @Override public list<class<?    Extends Javascriptmodule>> createjsmodules () {return collections.emptylist (); } @Override Public list<viewmanager> createviewmanagers (Reactapplicationcontext reactcontext) {return    Collections.emptylist (); }}

 4;

Package Com.now;import Android.app.application;import Com.facebook.react.reactapplication;import Com.facebook.react.reactnativehost;import Com.facebook.react.reactpackage;import Com.facebook.react.shell.mainreactpackage;import Com.facebook.soloader.soloader;import Java.util.Arrays;import Java.util.list;public class MainApplication extends application implements Reactapplication {private final Reactnativeh OST mreactnativehost = new Reactnativehost (this) {@Override public boolean getusedevelopersupport () {return B    Uildconfig.debug;          } @Override protected list<reactpackage> getpackages () {return arrays.<reactpackage>aslist (    New Mainreactpackage (),//Put here Oh New anexamplereactpackage ());  }  };  @Override public Reactnativehost Getreactnativehost () {return mreactnativehost;    } @Override public void OnCreate () {super.oncreate ();  Soloader.init (this,/* native Exopackage */false); }}

The Last Call:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from ' React Import {  appregistry,  StyleSheet,  Text,  view,//introduced Oh  nativemodules} from ' react-native '; Export default class now extends Component {  test () {      //native-native module. Method      of native module Li NativeModules.ToastModule.rnCallNative ("Now, see Me");  Render () {    return (      <view style={styles.container}>        <text style={styles.welcome} onpress={ This.test.bind (This)}>          sdsd         </Text>      </View>    );}  } Const STYLES = stylesheet.create ({  container: {    flex:1,    justifycontent: ' Center ',    alignitems: ' Center ',    backgroundcolor: ' #F5FCFF ',  },  welcome: {    fontsize:20,    textAlign: ' Center ',    margin:10,  },  instructions: {    textAlign: ' Center ',    color: ' #333333 ',    marginbottom: 5,  },}); Appregistry.registercomponent (' Now ', () = Now);

RN invoke native method of Android (implement toast effect)