美文网首页
React native调用Android本地方法(API)

React native调用Android本地方法(API)

作者: _悟_空 | 来源:发表于2019-10-03 14:20 被阅读0次

android端:

第一步创建android被调用的对象:

创建一个类继承ReactContextBaseJavaModule

public class BaseJSBridgeAndroid extends ReactContextBaseJavaModule {
    public BaseJSBridgeAndroid(@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Nonnull
    @Override
    public String getName() {
        //1.作用:用于Js端调用Android端的桥梁(你可以理解为一个全局变量)
        //2.命名:避免使用时混淆,最好是以类名同名。
        //3.使用:在js端通过 NativeModules.BaseJSBridgeAndroid.xxxandroid方法xx();
        return "BaseJSBridgeAndroid";
    }

    @ReactMethod//此方法为Android端被js端调用的方法。
    public void testAndroidToast(String msg){
        Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_SHORT).show();
    }
}

1.上面创建的testAndroidToast(String msg) 方法用来接收js端的调用
2.方法的书写规则: 必须满足以下三点;

  • 方法的权限必须是public
  • 方法的返回类型必须是void
  • 方法必须用@ReactMethod标记

第二步创建NativeModule

public class BaseReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new BaseJSBridgeAndroid(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

这里将android的方法类注入给react使用。
这一步只需要将第一步中创建的BaseJSBridgeAndroid类添加到createNativeModules方法中即可

第三步将第二步中创建的Native加入到MainApplication的ReactPackage列表中

public class MainApplication extends Application implements ReactApplication {
    ...
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new BaseReactPackage()
            );
        }
    ...
}

到这里Android端所需要的准备就完毕了。 下面为js端需要做的事情。

js端:

第一步添加依赖:

import {NativeModules} from 'react-native';

第二步使用:

NativeModules.BaseJSBridgeAndroid.testAndroidToast('调用android端方法');

这里的BaseJSBridgeAndroid是android部分第一步的getName()方法中返回的字符串;
如果还是不明白建议去下载下项目运行一遍就会立马明白了。

github项目地址

项目下载后如何运行起来

1.用visual studio code打开工程依次执行以下命令

  • npm install //下载依赖包;不下载的话运行不起来。
  • yarn
  • yarn start

2.用android studio将工程运行到手机上
3.reload App,如果还是加载不出来那么把app进程杀死重启,然后再重复操作1.步骤。
4.如果还是不行那么执行 react-native run-android命令。

相关文章

网友评论

      本文标题:React native调用Android本地方法(API)

      本文链接:https://www.haomeiwen.com/subject/tuikuctx.html