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('成功调用原生方法');

总结

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