8.RN js调用原生方法

React Native 调用原生方法

在实际的项目中 , 很多地方通过现有的RN方法, 或者npm包无法完全满足我们的需求
所以可能会需要自己写一些相关的原生方法进行调用

1. 新建一个对象 , 来存放自己编写的所有RN模块

我这里用的名字是 RNReactPackage.java

package com.onetoone.reactnative;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.onetoone.reactnative.appstore.AppStore;
import com.onetoone.reactnative.device.Device;
import com.onetoone.reactnative.hotUpdate.HotUpdate;
import com.onetoone.reactnative.log.Log;
import com.onetoone.reactnative.splashScreen.SplashScreenModule;
import com.onetoone.reactnative.wallpaper.Wallpaper;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class RNReactPackage implements ReactPackage {


    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        // 添加安卓原生的activity模块
        modules.add(new RNBridgeManager(reactContext));
        modules.add(new AppStore(reactContext));
        modules.add(new SplashScreenModule(reactContext));
        modules.add(new Wallpaper(reactContext));
        modules.add(new Log(reactContext));
        modules.add(new HotUpdate(reactContext));
        modules.add(new Device(reactContext));
        return modules;
    }
}

上面的代码不建议完全照抄, 因为我的模块代码并没有贴出来

实现一个RN模块

就以Device为例吧 , 也没实现啥功能 , 就是获取设备的sn码
装饰器@ReactNative说明该方法是一个RN方法 , 可被js调用
Callback 代表是回调函数, 在js端以function接受回调数据
当然还有其他交互方式, 比如通过发送事件的方式, 在7. React Native 热更新中有用到,可以参考

package com.onetoone.reactnative.device;
import androidx.annotation.NonNull;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.lang.reflect.Method;

public class Device extends ReactContextBaseJavaModule {
    private ReactApplicationContext context;
    public Device(ReactApplicationContext context){
        super(context);
        this.context = context;
    }
    @NonNull
    @Override
    public String getName() {
        return "device";
    }
    @ReactMethod
    public void getDeviceSN(Callback callback){
        String serial = null;
        try {
            Class<?> c =Class.forName("android.os.SystemProperties");
            Method get =c.getMethod("get", String.class);
            serial = (String)get.invoke(c, "ro.serialno");
        } catch (Exception e) {
            e.printStackTrace();
        }
        callback.invoke(serial);
    }
}

在主函数中添加这些模块

在MainApplication.java中, 添加RNReactPackage

public class MainApplication extends Application implements ReactApplication {
  private Handler handler;
  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new RNReactPackage());
          return packages;
        }
       
       // ...

在js中调用

import {NativeModules} from "react-native";
NativeModules.device.getDeviceSN((res: string) => {
      resolve(res)
    })

我基本只贴出来了代码 , 足够借鉴了 , 不懂的留言吧 ! o(´^｀)o