react native js中调用native中的方法

react native js中调用native中的方法

这里主要涉及到几个类

1. java
/**
<ul><li>Base class for Catalyst native modules that require access to the {@link ReactContext}</li>
<li>instance.
*/
ReactContextBaseJavaModule //native的类继承该类


2.ReactPackage—-所有的继承自ReactContextBaseJavaModule的子类，都会注册到这个ReactPackage里维护的一个集合里。

3.关键的类ReactApplication，里面只有一个方法ReactNativeHost，该抽象类中主要实现方法getPackages，这里会获取在上面ReactPackage中的列表，我们将会在这注册自己书写的packages，这里默认会注册一个MainReactPackage。

具体代码流程

native端主要有三个类：

//module类public class TestDemoModule extends ReactContextBaseJavaModule {    public TestDemoModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "TestDemoModule";    }    @ReactMethod    public void show(String str) {        Toast.makeText(getReactApplicationContext(), str, Toast.LENGTH_SHORT).show();    }}

下面是package类，module会注册到modules这个集合里：

public class TestDemoPackage implements ReactPackage {    @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        List<NativeModule> modules = new ArrayList<>();        modules.add(new TestDemoModule(reactContext));        return modules;    }    @Override    public List<Class<? extends JavaScriptModule>> createJSModules() {        return Collections.emptyList();    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

下面就是在MainApplication中ReactNativeHost通过getPackages获取native端的注册类，

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() {            return Arrays.<ReactPackage>asList(                    new MainReactPackage(),                    new TestDemoPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }    @Override    public void onCreate() {        super.onCreate();        SoLoader.init(this, /* native exopackage */ false);    }

上面完成了整体的编写，下面是在js端的调用：

这里简单列出两种：

• 直接直接引入getName返回的名字，代码如下：

  import {  AppRegistry,  StyleSheet,  Text,  View,  TestDemoModule,} from 'react-native';var {NativeModules}=require('react-native');var testDemoModuleAndroid = NativeModules.TestDemoModule;//下面就可以调用了，testDemoModuleAndroid.show('Hello Toast of native');

• 直接引入NativeModules，这个就更简单了：

  import {  AppRegistry,  StyleSheet,  Text,  View,  NativeModules,} from 'react-native';//直接使用，是不是更简单NativeModules.TestDemoModule.show('成功调用原生方法');

总结

上面就是两种方法，还是很简单的吧，希望能给初学的同学参考。